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 Easyui实现登陆框界面
Jul 10 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery中event.target和this的区别详解
Aug 13 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语法(2)
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
实例讲解Python3中abs()函数
2019/02/19 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
党课知识竞赛主持词
2014/04/01 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
入队仪式主持词
2015/07/04 职场文书
趣味运动会赞词
2015/07/22 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers