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 相关文章推荐
javascript级联下拉列表实例代码(自写)
May 10 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 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
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue中props的使用详解
2018/06/15 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
创业计划书如何编写
2014/02/06 职场文书
心理健康课教学反思
2014/02/13 职场文书
大学班级计划书
2014/04/29 职场文书
倡议书格式
2014/08/30 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
预备党员考察意见范文
2015/06/01 职场文书
python基础之模块的导入
2021/10/24 Python