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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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 图片上传代码
2011/09/13 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
深入浅析python继承问题
2016/05/29 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
大学英语专业求职信
2014/06/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
运动会3000米加油稿
2015/07/21 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python