highcharts-3d.js實現餅狀圖

嘛，首先，廢話一下，這個插件挺好用的。我是因為做亮燈率demo所以接觸了它。

首先引用外部文件，jQuery.js,highcharts.js,highcharts-3d.js，好的，這就搞定了第一步。

其次在html文件定義一個div，設置一下id值。完美。

然后，定義一個初始化方法initcharts，使用js獲取div，調用highcharts()方法繪制圖像。

最后在$(document).ready(function(){

initcharts(2,2,8);//調用初始化函數

});

附錄：

1. 3D餅狀圖官方實例地址：https://www.hcharts.cn/docs/basic-3d-charts#h2-2

2. initcharts函數源碼

function initcharts(onlinecount,offlinecount,unlinghtcount){
    var ratelgt = ((onlinecount/(onlinecount + offlinecount + unlinghtcount))*100).toFixed(2);
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '集控器統計'
        },
        subtitle: {
            text: '亮燈率: '+ ratelgt +"%"
        },
        credits:{
              enabled:false // 禁用版權信息
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: <b>{point.y}</b>'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '異常數目',
            data: [
                {name:'在線',color:'#05A808',y:onlinecount},
                {name:'離線',color:'#7C301D',y:offlinecount},
                {name:'停電',color:'#25485E',y:unlinghtcount}
            ]
        }]
    });
}

 3.效果圖