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}

            ]

        }]

    });

}