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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript封装简单实现方法
Aug 11 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
为什么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
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
2015年招生工作总结
2015/05/04 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android
nginx访问报403错误的几种情况详解
2022/07/23 Servers