jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】


Posted in jQuery onMarch 24, 2017

本文实例讲述了jQuery插件FusionCharts实现的MSBar2D图效果。分享给大家供大家参考,具体如下:

1、页面展示

<!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 MSBar2D图</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 doubleBar = new FusionCharts( "FusionCharts/MSBar2D.swf", "doubleLineId", "100%", "540", "0" );
  doubleBar.setXMLUrl("doubleLine.xml");
  doubleBar.render("doubleBarChart");
});
</script>
</head>
<body>
  <div id="doubleBarChart"></div>
</body>
</html>

2、数据源

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2012和2013年某桥一周通过的人数' xAxisName='星期' yAxisName='人数' showValues='0'
    baseFont='微软雅黑' baseFontSize='14' baseFontColor='#FF0000' outCnvBaseFont='宋体'
    outCnvBaseFontSize='20' outCnvBaseFontColor='#00FF00' legendShadow='1'
    legendAllowDrag='1' reverseLegend='1' interactiveLegend='1' legendNumColumns='2'
    minimiseWrappingInLegend='1' showLegend='1' legendPosition='BOTTOM' showZeroPlane='1'>
  <categories>
   <category label='星期一' />
   <category label='星期二' />
   <category label='星期三' />
   <category label='星期四' />
   <category label='星期五' />
   <category label='星期六' />
   <category label='星期日' />
  </categories>
  <dataset seriesName='2012'>
   <set value='656445' />
   <set value='412555'/>
   <set value='956566' />
   <set value='125645' />
   <set value='561124' />
   <set value='265655' />
   <set value='451212' />
  </dataset>
  <dataset seriesName='2013'>
   <set value='154512'/>
   <set value='598655'/>
   <set value='654544'/>
   <set value='956565'/>
   <set value='245454' />
   <set value='965565' />
   <set value='454545' />
  </dataset>
</chart>

3、运行结果

jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
You might like
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
浅谈Python中数据解析
2015/05/05 Python
Python max内置函数详细介绍
2016/11/17 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
公务员的自我鉴定
2013/10/26 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
开业庆典答谢词
2014/01/18 职场文书
奶茶店创业计划书
2014/08/14 职场文书
玄武湖导游词
2015/02/05 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书