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 相关文章推荐
js常用自定义公共函数汇总
Jan 15 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue如何判断dom的class
Apr 26 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
javascript实现前端分页功能
Nov 26 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
php allow_url_include的应用和解释
2010/04/22 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
使用Python来开发微信功能
2018/06/13 Python
Django框架模板介绍
2019/01/15 Python
python二元表达式用法
2019/12/04 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
仓库管理制度
2014/01/21 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
小学教师培训方案
2014/06/09 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
会计学专业求职信
2014/07/17 职场文书
高中运动会广播稿
2014/09/16 职场文书
活动新闻稿范文
2015/07/17 职场文书
Python实现Hash算法
2022/03/18 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript