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