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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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 字符串压缩方法比较示例
2014/01/23 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python实现微信机器人的方法
2019/09/06 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python urllib和urllib3知识点总结
2021/02/08 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
造价工程师个人求职信
2013/09/21 职场文书
小学教师师德反思
2014/02/03 职场文书
研究生导师评语
2014/12/31 职场文书
党支部工作总结2015
2015/04/01 职场文书
刑事撤诉申请书
2015/05/18 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python