本文主要介绍了jQuery插件FusionCharts实现2D直方图的效果，并结合完整的实例分析了FusionCharts插件绘制2D直方图的实现步骤和相关属性设置技巧。附上演示源代码供读者下载参考，有需要的朋友可以参考一下。

本文展示了由jQuery插件FusionCharts实现的2D直方图效果。分享给你，供你参考，如下：

1.实施代码：

！文档类型html

超文本标记语言

头

meta charset='UTF-8 '

TitleFusionCharts最新FusionCharts2D直方图/title

脚本类型=' text/JavaScript ' src=' jquery-1 . 7 . 2 . min . js '/script

script type=' text/JavaScript ' src=' fusion charts/fusion charts . js '/script

脚本

FusionCharts.ready(function(){

var column chart=new fusion charts({

类型：' column2d '，

renderAt:'column2D '，

宽度：' 1345 '，

身高：' 620 '，

数据源：{

图表':{

标题':'月销售量'，

XAxisName ':'月'，

YAxisName ':'销售量'，

export enabled“:”1

},

数据':[

{

标签':' 1:'一月'，

值':' 120 '

},{

标签':' 2:'二月'，

值':' 230 '

},{

标签':' 3:'三月'，

值':' 654 '

},{

标签':' 4:'四月'，

值':' 454 '

},{

标签':' 5:'可能'，

值':' 323 '

},{

标签':' 6:'六月'，

值':' 640 '

},{

标签':' 7:'七月'，

值':' 431 '

},{

标签':' 8:'八月'，

值':' 809 '

},{

标签':' 9:'九月'，

值':' 345 '

},{

标签':'十月'，

值':' 430 '

},{

标签':'十一月'，

值':' 870 '

},{

标签':'十二月'，

值':' 670 '

}]

}

}).render()；

});

/脚本

/头

身体

div id='column2D'/div

/body

/html

2.实现效果图：

附：完整的示例代码请点击此处。

更多对jQuery感兴趣的读者，请参考我们的专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》和《jquery选择器用法总结》。

希望这篇文章对jQuery编程的大家有所帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。