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 22 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php eval函数用法总结
2012/10/31 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
深入理解Python分布式爬虫原理
2017/11/23 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016公司新年问候语
2015/11/11 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
MySQL的join buffer原理
2021/04/29 MySQL
React列表栏及购物车组件使用详解
2021/06/28 Javascript
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
P站美图推荐——变身女主角特辑
2022/03/20 日漫