jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】


Posted in jQuery onMarch 22, 2017

本文实例讲述了jQuery插件FusionCharts绘制ScrollColumn2D图效果。分享给大家供大家参考,具体如下:

1、index.html页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionCharts ScrollColumn2D图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/FusionCharts.js"></script>
<script type="text/javascript">
  $(function(){
    var scrollColumn2D = new FusionCharts( "js/ScrollColumn2D.swf", "scrollColumn2D_Id", "500", "600", "0" );
    scrollColumn2D.setXMLUrl("scrollColumn2D.xml");
    scrollColumn2D.render("scrollColumn2D_div");
  });
</script>
</head>
<body>
 <div id="scrollColumn2D_div"></div>
</body>
</html>

2、数据源 scrollColumn2D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2014年和2013年年收入' xAxisName='月份' yAxisName='收入' showValues='0' useRoundEdges='1' baseFontSize='14' baseFontColor='FF0000'>
  <categories>
   <category label='一月' />
   <category label='二月' />
   <category label='三月' />
   <category label='四月' />
   <category label='五月' />
   <category label='六月' />
   <category label='七月' />
   <category label='八月' />
   <category label='九月' />
   <category label='十月' />
   <category label='十一月' />
   <category label='十二月 ' />
  </categories>
  <dataset seriesName='2014'>
   <set value='27456' />
   <set value='28950'/>
   <set value='51100' />
   <set value='29560' />
   <set value='45120' />
   <set value='95320' />
   <set value='65231' />
   <set value='36530' />
   <set value='23321' />
   <set value='32312' />
   <set value='98856' />
   <set value='21212' />
  </dataset>
  <dataset seriesName='2013'>
   <set value='23322'/>
   <set value='23298'/>
   <set value='78454'/>
   <set value='23233'/>
   <set value='45122' />
   <set value='12212' />
   <set value='23212' />
   <set value='85455' />
   <set value='55323' />
   <set value='23233' />
   <set value='62622' />
   <set value='32333' />
  </dataset>
</chart>

3、运行结果:

(1)一月到六月数据

jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】

(2)七月到十二月数据

jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
python之import机制详解
2014/07/03 Python
Python中random模块生成随机数详解
2016/03/10 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python画微信表情符的实例代码
2019/10/09 Python
详解Django CAS 解决方案
2019/10/30 Python
Django分组聚合查询实例分享
2020/04/29 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
高校自主招生自荐信
2013/12/09 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
python常见的占位符总结及用法
2021/07/02 Python