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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jquery插件实现搜索历史
Apr 24 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之源码目录结构与功能说明
2016/06/01 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python类定义的讲解
2013/11/01 Python
python操作xml文件示例
2014/04/07 Python
Python的动态重新封装的教程
2015/04/11 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python实现共轭梯度法
2019/07/03 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python3.7添加dlib模块的方法
2020/07/01 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
德国旅游网站:weg.de
2018/06/03 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
全国税务系统先进集体事迹材料
2014/05/19 职场文书
品酒会策划方案
2014/05/26 职场文书
少先队活动总结
2014/08/29 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
工作经历证明范本
2015/06/15 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL