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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现推拉门效果
Oct 19 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP实现小偷程序实例
2016/10/31 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
python读取注册表中值的方法
2013/04/08 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python 实现的车牌识别项目
2021/01/25 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
大专自我鉴定范文
2013/10/23 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
村委会主任先进事迹
2014/01/15 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年领班工作总结
2014/11/25 职场文书
委托函范文
2015/01/29 职场文书
丧事主持词
2015/07/02 职场文书