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


Posted in jQuery onMarch 23, 2017

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

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 MSBar3D图</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 double3DBar = new FusionCharts( "FusionCharts/MSBar3D.swf", "doubleLineId", "100%", "540", "0" );
   double3DBar.setXMLUrl("doubleLine.xml");
   double3DBar.render("double3DBarChart");
});
</script>
</head>
<body>
  <div id="double3DBarChart"></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实现的MSBar3D图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
jquery实现图片平滑滚动详解
Mar 22 #jQuery
You might like
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP安全防范技巧分享
2011/11/03 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
看了就知道什么是JSON
2007/12/09 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python logging日志模块的详解
2017/10/29 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
详解python3中zipfile模块用法
2018/06/18 Python
python判断变量是否为列表的方法
2020/09/17 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
青年志愿者活动方案
2014/08/17 职场文书
优秀团员个人总结
2015/02/26 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers