jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】


Posted in jQuery onMay 13, 2017

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

1、FusionCharts中的2D双柱状图页面

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 2D双柱状图</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
$(function(){
 var column2D = new FusionCharts( "FusionCharts/MSColumn2D.swf", "myChartId", "100%", "520", "0" ); 
 column2D.setXMLUrl("doubleColumn2D.xml"); 
 column2D.render("doubleColumn2DChart");
});
</script>
</head>
<body>
  <div id="doubleColumn2DChart"></div>
</body>
</html>

2、数据源

doubleColumn2D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2015年和2016年统计收入' xAxisName='月份' yAxisName='收入' showValues='0' baseFont='微软雅黑' baseFontSize='14'
    baseFontColor='#00FF00' outCnvBaseFont='宋体' outCnvBaseFontSize='16' outCnvBaseFontColor='#798777' showAboutMenuItem='1'
    showLabels='1' labelDisplay='ROTATE ' useEllipsesWhenOverflow='1' rotateLabels='1' slantLabels='1' staggerLines='2'
    labelStep='3' placeValuesInside='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' showShadow='1' adjustDiv='1'
    setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numDivLines='8' divLineColor='#987989' divLineIsDashed='1'>
  <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='2015'>
   <set value='45155' />
   <set value='12452'/>
   <set value='63455' />
   <set value='45233' />
   <set value='95656' />
   <set value='87545' />
   <set value='12425' />
   <set value='94633' />
   <set value='85452' />
   <set value='75455' />
   <set value='32312' />
   <set value='65625' />
  </dataset>
  <dataset seriesName='2016'>
   <set value='65655'/>
   <set value='74555'/>
   <set value='61245'/>
   <set value='12451'/>
   <set value='95656' />
   <set value='24655' />
   <set value='45122' />
   <set value='32656' />
   <set value='65656' />
   <set value='95666' />
   <set value='65323' />
   <set value='54656' />
  </dataset>
</chart>

3、运行结果图:

jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
jQuery遍历节点方法汇总(推荐)
May 13 #jQuery
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
jQuery遮罩层实例讲解
May 11 #jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
You might like
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
详解Python3中字符串中的数字提取方法
2017/01/14 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python的变量与赋值详细分析
2017/11/08 Python
python实现学员管理系统
2019/02/26 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
普天C++笔试题
2016/03/20 面试题
韩语专业本科生求职信
2013/10/01 职场文书
园长自我鉴定
2013/10/06 职场文书
优秀中专生推荐信
2013/11/17 职场文书
交通事故检查书范文
2014/01/30 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
关于读书的活动方案
2014/08/14 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
优秀护士事迹材料
2014/12/25 职场文书
预备党员入党感言
2015/08/01 职场文书