jQuery插件FusionCharts實現的2D柱狀圖效果示例【附demo源碼下載】

2019-11-19 17:17:58

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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、實現效果圖：