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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
两款万能的php分页类
2015/11/12 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
js实现开关灯效果
2020/03/30 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
深入理解redux之compose的具体应用
2020/01/12 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
促销活动总结怎么写
2014/06/25 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python