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 } });