jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】


Posted in jQuery onApril 20, 2017

本文实例讲述了jQuery插件FusionCharts绘制的3D双柱状图效果。分享给大家供大家参考,具体如下:

1、3D双柱状图页面源码如下

<!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 3D双柱状图</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 column3D = new FusionCharts( "FusionCharts/MSColumn3D.swf", "myChartId", "100%", "520", "0" );
 column3D.setXMLUrl("doubleColumn3D.xml");
 column3D.render("doubleColumn3DChart");
});
</script>
</head>
<body>
  <div id="doubleColumn3DChart"></div>
</body>
</html>

2、3D双柱状图数据源 doubleColumn3D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2015年和2016年统计收入' xAxisName='月份' yAxisName='收入' showValues='0' baseFont='微软雅黑' baseFontSize='14'
    baseFontColor='#00FF00' outCnvBaseFont='宋体' outCnvBaseFontSize='16' outCnvBaseFontColor='#798777' showAboutMenuItem='1'
    showLabels='1' labelDisplay='ROTATE ' useEllipsesWhenOverflow='1' rotateLabels='1' slantLabels='1' staggerLines='2'
    labelStep='3' placeValuesInside='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' showShadow='1' adjustDiv='1'
    setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numDivLines='8' divLineColor='#987989' divLineIsDashed='1'>
  <categories>
   <category label='一月' />
   <category label='二月' />
   <category label='三月' />
   <category label='四月' />
   <category label='五月' />
   <category label='六月' />
   <category label='七月' />
   <category label='八月' />
   <category label='九月' />
   <category label='十月' />
   <category label='十一月' />
   <category label='十二月' />
  </categories>
  <dataset seriesName='2015'>
   <set value='45155' />
   <set value='12452'/>
   <set value='63455' />
   <set value='45233' />
   <set value='95656' />
   <set value='87545' />
   <set value='12425' />
   <set value='94633' />
   <set value='85452' />
   <set value='75455' />
   <set value='32312' />
   <set value='65625' />
  </dataset>
  <dataset seriesName='2016'>
   <set value='65655'/>
   <set value='74555'/>
   <set value='61245'/>
   <set value='12451'/>
   <set value='95656' />
   <set value='24655' />
   <set value='45122' />
   <set value='32656' />
   <set value='65656' />
   <set value='95666' />
   <set value='65323' />
   <set value='54656' />
  </dataset>
</chart>

3、运行结果如下图

jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】

jQuery 相关文章推荐
jquery图片放大镜效果
Jun 23 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
jQuery Plupload上传插件的使用
Apr 19 #jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
Jquery-data的三种用法
Apr 18 #jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
You might like
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php防止sql注入的方法详解
2017/02/20 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python中关于for循环的碎碎念
2017/06/30 Python
Flask之flask-session的具体使用
2018/07/26 Python
Django之模型层多表操作的实现
2019/01/08 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
房地产融资计划书
2014/01/10 职场文书
企业总经理职责
2014/02/02 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
如何写好自荐信
2014/04/07 职场文书
房产继承公证书
2014/04/09 职场文书
校长四风对照检查材料
2014/09/27 职场文书