javascript - 如何使用highcharts，javascript绘制小时和分钟值（hh：mm）饼图

Question

如何使用波纹管表格的 highcharts 绘制 hh:mm 饼图

标签： javascripthighcharts

Answer 1

*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
  The bellow Script  is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
                <div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>

// Duration Graph
Highcharts.chart('durationGraphcontainer', {
    data: {
        table: 'durationGraph'
    },
    chart: {
        type: 'pie'
    },
    title: {
       text : 'Inetrruption Reason Type Graph'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Million Units'
        },
        stackLabels: {
            enabled: true,
            align: 'center'
        }
    },
    legend: {
        enabled: true,
        floating: true,
        verticalAlign: 'top',
        align:'left',
        layout: 'vertical',
        y: 100,
        labelFormatter: function() {
                 return this.name + " - " + this.percentage.toFixed(2) + "%";
        }
},  
    tooltip: {
        pointFormat: '<b>{point.percentage:.2f}%</b>',
        formatter: function () {
             return this.point.name.toUpperCase();
        }
    }, 
    plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: false,
                    format: '{point.percentage:.2f} %',
                } ,
                innerSize: 100,
                depth: 45,
                showInLegend: true
            },
    },
    series:[
    {
        type: 'pie',
        dataLabels: {
            verticalAlign: 'top',
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            formatter: function () {
                return  this.point.y.toFixed(2);
            }
        }
    },{point: {
        events: {
            click: function() {
            }
        }
    }
}],
credits: {
    enabled: false
}


});*