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实现定时刷新功能代码
May 09 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
详解jQuery中的prop()使用方法
Jan 05 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实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
easyui validatebox验证
2016/04/29 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python 项目目录结构设置
2020/02/14 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
文员岗位职责
2013/11/09 职场文书
春节联欢会策划方案
2014/05/16 职场文书
民生工作实施方案
2014/05/31 职场文书
老干部工作先进事迹
2014/08/17 职场文书
地震慰问信
2015/02/14 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
丧事酒宴答谢词
2015/09/30 职场文书