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

Question

如何使用highcharts为波纹管表绘制hh：mm饼图

Answer 1

你可以尝试这种方法，我们得到总时间，然后从各个点创建一个高图表图表：

const data = [
 {
   name: 'Line Clear - Line maintenance',
   value: '06:29',
   color: '#eef441'
 },
 {
   name: 'Incoming Supply Failure (ICF)',
   value: '14:44',
   color: '#f44242'
 },
 {
   name: '33 KV Line Breakdown',
   value: '02:13',
   color: '#41f48b'
 },
 {
   name: 'Line Clear - SS maintenance',
   value: '00:10',
   color: '#4176f4'
 },
 {
   name: 'Momentary Interruptions',
   value: '01:11',
   color: '#e541f4'
 }
];

var totalTimeSeconds = data.reduce((sum,row) => {
    return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);

var dataSeries = data.map((row) => {
    return {
       name: row.name + " (" + row.value +")",
       y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
       color: row.color
    };
});

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Reason Type'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Reason',
        colorByPoint: true,
        data: dataSeries
    }]
});

这是一个证明这一点的JSFiddle：Reason-Chart

Answer 2

*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
}


});*