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 应用类库代码
Jun 02 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
子页向父页传值示例
Nov 27 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
详解Python做一个名片管理系统
2019/03/14 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
个人求职信范文分享
2013/12/13 职场文书
干部培训自我鉴定
2014/01/22 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
Linux系统下安装PHP7.3版本
2021/06/26 PHP
css样式important规则的正确使用方式
2022/06/10 HTML / CSS