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条件判断使用小技巧总结
Sep 08 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
JS模拟多线程
2007/02/07 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python测试mysql写入性能完整实例
2018/01/18 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python几种常用功能实现代码实例
2019/12/25 Python
python读写文件write和flush的实现方式
2020/02/21 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python爬取微博评论的实例讲解
2021/01/15 Python
数据库笔试题
2013/05/09 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
计划生育宣传标语
2014/06/21 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
租房协议书范文
2014/08/20 职场文书
五四青年节的活动方案
2014/08/20 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
《比的意义》教学反思
2016/02/18 职场文书