jQuery插件FusionCharts实现的三维(三维的缩写)柱状图效果实例【附演示源码下载】

本文实例讲述了jQuery插件FusionCharts实现的三维(三维的缩写)柱状图效果。分享给大家供大家参考，具体如下：

1、实现源码：

！DOCTYPE html html head meta charset=' UTF-8 ' title fusion charts 3d柱状图/title脚本src=' http : js/jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/fusion charts。js /脚本样式正文，html { width :99%；高： 98%;font-family :“arial rounded mt bold”；font-size : 12px} /style脚本$(文档)。ready(function(){ FusionCharts。ready(function(){ var column 3d charts=new FusionCharts({ type : ' column 3d '，renderAt: 'column3D '，width: '1350 '，height: '650 '，dataFormat: 'json '，数据源： { ' chart ' : ' { caption ' 3: '(我们)一年收入统计，' xAxisName': '月份，' yAxisName': '收入明细，' paletteColors ' : ' # ' 0075c2 '，' valueFontColor': '，#000000 '，' baseFont': 'Helvetica纽伊，Arial '，' captionFontSize': '16 '，' subcaptionFontSize': '16 '，' subcaptionFontBold': '1 '，' placeValuesInside': '0 '，' rotateValues ' : ' 1 '，' showShadow ' :我们)一月，' value': '3689' }，{ 'label': '(我们)二月，' value': '5874' }，{ 'label': '(我们)三月，' value': '4512' }，{ '标签' : '(我们)四月，' value': '6785' }，{ 'label': '(我们)五月，' value': '1568' }，{ 'label': '(我们)六月，' value': '2745' }，{ 'label': '(我们)七月，' value': '4758' }，{ 'label': '(我们)八月，' value': '9652' }，{ 'label': '(我们)九月，' value': '3425' }，{ 'label': '(我们)十月，' value': '2014' }，{ 'label': '(我们)十一月，' value': '3652' }，{ 'label': '(我们)十二月，' value ' : ' 7421 ' }]})； 第3栏图表。render()；});});/script/head body div id=' column 3d '/div/body/html 2，实现效果图：

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。