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树插件zTree使用方法详解
May 02 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery冲突问题解决方法
Jan 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Django 多环境配置详解
2019/05/14 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
运行Python编写的程序方法实例
2020/10/21 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
药学专业毕业生求职信
2013/10/20 职场文书
中医专业应届生求职信
2013/11/17 职场文书
商业项目策划方案
2014/06/05 职场文书
高三英语复习计划
2015/01/19 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
如何在Python项目中引入日志
2021/05/31 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技