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