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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现简单全选框
Sep 13 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python简单实例训练(21~30)
2017/11/15 Python
python实现括号匹配的思路详解
2018/08/23 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
flask 实现token机制的示例代码
2019/11/07 Python
wxPython多个窗口的基本结构
2019/11/19 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
如何使用python代码操作git代码
2020/02/29 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
学生实习自我鉴定
2013/10/11 职场文书
秸秆管理实施方案
2014/03/15 职场文书
经销商年会策划方案
2014/05/29 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android