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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery实现简单全选框
Sep 13 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将向Java靠拢
2006/10/09 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现文件下载实例分享
2014/06/02 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
详解Python yaml模块
2020/09/23 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
小学生元旦广播稿
2014/02/21 职场文书
销售内勤岗位职责
2014/04/15 职场文书
五好家庭事迹材料
2014/12/20 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
建议书范文
2015/02/05 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers