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制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery插件实现图片悬浮
Apr 16 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
.htaccess文件保护实例讲解
2011/02/06 PHP
ini_set的用法介绍
2014/01/07 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
法国春天百货官网:Printemps.com
2020/06/29 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
秋天的图画教学反思
2014/05/01 职场文书
优秀教师单行材料
2014/12/16 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python