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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
php跨域调用json的例子
Nov 13 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
js实现搜索栏效果
Nov 16 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
使用puppeteer爬取网站并抓出404无效链接
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入门源程序
2006/10/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php计算一个文件大小的方法
2015/03/30 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Django通过json格式收集主机信息
2020/05/29 Python
向领导表决心的话
2014/03/11 职场文书
核心价值观演讲稿
2014/05/13 职场文书
初中政教处工作总结
2015/08/12 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
详解python的内存分配机制
2021/05/10 Python
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
python中filter,map,reduce的作用
2022/06/10 Python