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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现简单评论区功能
Oct 26 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实现求相对时间函数
2015/06/15 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
Python连接DB2数据库
2016/08/27 Python
Django的models模型的具体使用
2019/07/15 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
愚人节活动策划方案
2014/03/11 职场文书
就业协议书的作用
2014/04/11 职场文书
委托书格式
2014/08/01 职场文书
单位授权委托书范本
2014/09/26 职场文书
创建文明城市倡议书
2015/04/28 职场文书
校运会广播稿
2015/08/19 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Oracle 触发器trigger使用案例
2022/02/24 Oracle
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers