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实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
使用jQuery实现购物车
Oct 29 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python 异常处理总结
2016/10/18 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python得到电脑的开机时间方法
2018/10/15 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
就业自荐信
2013/12/04 职场文书
高中运动会广播稿
2014/01/21 职场文书
超市中秋节活动方案
2014/02/12 职场文书
法律顾问服务方案
2014/05/15 职场文书
实验室标语
2014/06/21 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python