jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

更新时间：2020-04-27 10:45:01 作者：startmvc

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果。分享给大家供大家参考，具体如下

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

1、实现代码：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>FusionCharts最新FusionCharts2D柱状图</title>
 <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
 <script type="text/javascript" src="FusionCharts/fusioncharts.js" ></script>
 <script>
 FusionCharts.ready(function(){
 var columnChart = new FusionCharts({
 type:"column2d",
 renderAt:"column2D",
 width:"1345",
 height:"620",
 dataSource:{
 "chart":{
 "caption":"月销售量",
 "xAxisName":"月份",
 "yAxisName":"销售量",
 "exportEnabled":"1"
 },
 "data":[
 {
 "label":"1月",
 "value":"120"
 },{
 "label":"2月",
 "value":"230"
 },{
 "label":"3月",
 "value":"654"
 },{
 "label":"4月",
 "value":"454"
 },{
 "label":"5月",
 "value":"323"
 },{
 "label":"6月",
 "value":"640"
 },{
 "label":"7月",
 "value":"431"
 },{
 "label":"8月",
 "value":"809"
 },{
 "label":"9月",
 "value":"345"
 },{
 "label":"10月",
 "value":"430"
 },{
 "label":"11月",
 "value":"870"
 },{
 "label":"12月",
 "value":"670"
 }]
 }
 }).render();
 });
 </script>
 </head>
 <body>
 <div id="column2D"></div>
 </body>
</html>

2、实现效果图：