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获取radio选中的值
May 05 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 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开发中常用的8个小技巧
2008/08/27 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
YII路径的用法总结
2014/07/09 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
pygame实现五子棋游戏
2019/10/29 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
赔偿协议书范本
2014/09/12 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python