jfreechart插件将数据展示成饼状图、柱状图和折线图


Posted in Javascript onApril 13, 2015

本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已;还有很多方法可以用于展示图表,例如自定义图表标签、使用jfreechart插件等;

1、导入js文件,包含了很多展示方法:

<script type="text/javascript" src=<select:link page="/js/ChartObject.js"/>></script> <script type="text/javascript" src=<select:link page="/js/FusionCharts.js"/>></script>

2、从后台获取数据:

function init(){
 
  var name3="<%=request.getAttribute("accountlist.name")%>";
  var value3="<%=request.getAttribute("accountlist.values")%>";
  var rate3="<%=request.getAttribute("accountlist.valueshb")%>";
  showChart4(name3,rate3); 
  //showChart3(name3,value3,""); 

 }

3、将数据赋值给图例:

function showChart4(names,values){
  var chartObj = new ChartObject();
  var xmlString="";
  chartObj.caption="各承运单位车辆销运比图 ";
  chartObj.showValues='0';
  chartObj.showLabels='1';
  chartObj.sNumberSuffix='%25';
  xmlString = chartObj.createDualYMSColumnXmlByValues(names,values,"","销运比=卷烟销量%车辆运力;",""); 
  var chart = new FusionCharts("Charts/MSColumn3DLineDY.swf", "ChartId2", "1000", "230", "0", "0");
  chart.setDataXML(xmlString); 
  chart.render("chartDiv2");
 }

4、在jsp页面中只需写入:

<div style="margin-top:3px;margin-left:3px;"><span id="chartDiv2" style="width:100%;"></span></div>

5.结果展示如下所示:

jfreechart插件将数据展示成饼状图、柱状图和折线图

以上所述就是本文的全部内容,有需要的小伙伴可以参考下。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 #Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 #Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 #Javascript
javascript继承的六大模式小结
Apr 13 #Javascript
javascript制作的简单注册模块表单验证
Apr 13 #Javascript
简化版手机端照片预览组件
Apr 13 #Javascript
javascript引用类型指针的工作方式
Apr 13 #Javascript
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
Symfony核心类概述
2016/03/17 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
利用Python破解验证码实例详解
2016/12/08 Python
python类的继承实例详解
2017/03/30 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python内置模块turtle绘图详解
2017/12/09 Python
如何基于线程池提升request模块效率
2020/04/18 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
.NET概念性的面试题
2012/02/29 面试题
研究生自荐信
2013/10/09 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
教师个人自我鉴定
2014/02/08 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
SQL Server表分区删除详情
2021/10/16 SQL Server