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 网页水印(非图片水印)实现代码
Mar 01 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
Angular2数据绑定详解
Apr 18 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 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+oracle 分页类
2006/10/09 PHP
php与paypal整合方法
2010/11/28 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python3实现点餐系统
2019/01/24 Python
分析经典Python开发工程师面试题
2019/04/08 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
小学庆六一主持词
2015/06/30 职场文书
《包身工》教学反思
2016/02/23 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
Python实现数据的序列化操作详解
2022/07/07 Python