jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】

2019-11-19 17:19:48

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果。分享給大家供大家參考，具體如下：

1、實(shí)現(xiàn)源碼：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>FusionCharts3D柱狀圖</title>    <script src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript" src="js/fusioncharts.js" ></script>    <style>      body,html{        width:99%;        height: 98%;        font-family: "arial rounded mt bold";        font-size: 12px;      }    </style>    <script>      $(document).ready(function(){        FusionCharts.ready(function () {          var column3DChart = new FusionCharts({            type: 'column3d',            renderAt: 'column3D',            width: '1350',            height: '650',            dataFormat: 'json',            dataSource: {              "chart": {                "caption": "(武林網(wǎng))一年收入統(tǒng)計(jì)",                "xAxisName": "月份",                "yAxisName": "收入明細(xì)",                "paletteColors": "#0075c2",                "valueFontColor": "#000000",                "baseFont": "Helvetica Neue,Arial",                "captionFontSize": "16",                "subcaptionFontSize": "16",                "subcaptionFontBold": "1",                "placeValuesInside": "0",                "rotateValues": "1",                "showShadow": "0",                "divlineColor": "#999999",                "divLineIsDashed": "1",                "divlineThickness": "1",                "divLineDashLen": "1",                "divLineGapLen": "1",                "canvasBgColor": "#ffffff"              },              "data": [                {                  "label": "(武林網(wǎng))一月",                  "value": "3689"                },                {                  "label": "(武林網(wǎng))二月",                  "value": "5874"                },                {                  "label": "(武林網(wǎng))三月",                  "value": "4512"                },                {                  "label": "(武林網(wǎng))四月",                  "value": "6785"                },                {                  "label": "(武林網(wǎng))五月",                  "value": "1568"                },                {                  "label": "(武林網(wǎng))六月",                  "value": "2745"                },                {                  "label": "(武林網(wǎng))七月",                  "value": "4758"                },                {                  "label": "(武林網(wǎng))八月",                  "value": "9652"                },                {                  "label": "(武林網(wǎng))九月",                  "value": "3425"                },                {                  "label": "(武林網(wǎng))十月",                  "value": "2014"                },                {                  "label": "(武林網(wǎng))十一月",                  "value": "3652"                },                {                  "label": "(武林網(wǎng))十二月",                  "value": "7421"                }              ]            }          });          column3DChart.render();        });      });    </script>  </head>  <body>    <div id="column3D"></div>  </body></html>

2、實(shí)現(xiàn)效果圖：