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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
详解js创建对象的几种方法及继承
Apr 12 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
Terran剧情介绍
2020/03/14 星际争霸
在PHP中操作Excel实例代码
2010/04/29 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
前端必学之PHP语法基础
2016/01/01 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
jQuery中实现text()的方法
2019/04/04 jQuery
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python 的类、继承和多态详解
2017/07/16 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python机器学习之KNN分类算法
2018/08/29 Python
python list格式数据excel导出方法
2018/10/31 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
企业申诉管理制度
2014/01/30 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
考研英语复习计划
2015/01/19 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers