highcharts实现简单饼状图

本文主要是介绍highcharts实现简单饼状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

highcharts实现简单饼状图

/**这是饼状图的展示*/
var zc=0;
var bj=0;
var lx=0;
if($("#countzc") !=0 && $("#countzc") !="0"){zc = ($("#countzc").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countbj") !=0 && $("#countbj") !="0"){bj = ($("#countbj").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countlx") !=0 && $("#countlx") !="0"){lx = ($("#countlx").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
var sourcedata =[{'name':'正常','y':zc*1,'color':'green'},{'name':'报警','y':bj*1,'color':'red'},{'name':'离线','y':lx*1,color:'#666666'}];pieChart(sourcedata);//调用传递数据function pieChart(data) {$('#piePicture').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: ''},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: false,color: '#000000',connectorColor: '#000000',format: '<b>{point.name}</b>: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: ' ',data: data}]});
}

这是highcharts柱状图的简单实现

/**这是柱状图的展示*/
var sourcePie =[{'y':$("#source1").html()*1},{'y':$("#source2").html()*1},{'y':$("#source3").html()*1},{'y':$("#source4").html()*1},{'y':$("#source5").html()*1}];
histogramPicture(sourcePie);//这是调用传递参数function histogramPicture(sourcePie) {$('#picutrePie').highcharts({chart: {type: 'column'},title: {text: ' '},subtitle: {text: ' '},xAxis: {categories: ['I','II','III','IV','VI']},yAxis: {min: 0,title: {text: ' ' //这是y轴的名称}},tooltip: {headerFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:f} 个</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0,                enabled:false},plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},series: [{name: '源数量',data: sourcePie}]});
}   

当highchasts需要用到时间的时候转换时间

Highcharts.setOptions({ global: { useUTC: false } });  

这篇关于highcharts实现简单饼状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---