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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 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实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python 12306抢火车票脚本
2018/02/07 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
主题教育活动总结
2014/05/05 职场文书
询价采购方案
2014/06/09 职场文书
股份合作协议书
2014/09/10 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
招商引资工作汇报
2014/10/28 职场文书
2015年三万活动总结
2015/03/25 职场文书
国庆节主题班会
2015/08/15 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
导游词之青岛崂山
2019/12/27 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL