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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
为什么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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
杏林同学录(一)
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
小学教师管理制度
2014/01/18 职场文书
博士生导师推荐信
2014/07/08 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
干部外出学习心得体会
2016/01/18 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang