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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现全选按钮
Jan 01 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 4.2书写安全的脚本
2006/10/09 PHP
PHP数组操作类实例
2015/07/11 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
基于python socketserver框架全面解析
2017/09/21 Python
详解django三种文件下载方式
2018/04/06 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
爱国卫生月实施方案
2014/02/21 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫