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.效果图