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

如何使用下表的highcharts绘制hh:mm饼图

---

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

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

const数据=[
{
名称：“线路清除-线路维护”，
值：“06:29”，
颜色：“#eef441”
},
{
名称：“输入电源故障（ICF）”，
值：“14:44”，
颜色：“#f44242”
},
{
名称：“33 KV线路故障”，
值：“02:13”，
颜色：“#41f48b”
},
{
名称：“线路清除-SS维护”，
值：“00:10”，
颜色：“#4176f4”
},
{
名称：“瞬间中断”，
值：“01:11”，
颜色：“#e541f4”
}
];
var totalTimeSeconds=数据。减少（（总和，行）=>{
返回和+1.0*时刻持续时间（row.value）.asSeconds（）；
}, 0.0);
var dataSeries=data.map（（行）=>{
返回{
名称：row.name+“（“+row.value+”），
y:moment.duration（row.value）.asSeconds（）/totalTimeSeconds，
颜色：row.color
};
});
Highcharts.chart（'容器'{
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
键入：“馅饼”
},
标题：{
文本：“原因类型”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：“{point.name}:{point.percentage:.1f}%”，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”
}
}
}
},
系列：[{
名称：'原因'，
colorByPoint：对，
数据：数据系列
}]
});

这里有一个JSFIDLE演示了这一点：

*实际上我正在使用表id为表生成饼图。
因此，我添加了另一列作为秒，生成了类似于下图的表格。
下面的脚本用于生成饼图
//持续时间图
Highcharts.chart（'durationGraphcontainer'{
数据：{
表：'durationGraph'
},
图表：{
键入：“馅饼”
},
标题：{
文本：“Inetrruption原因类型图”
},
亚克斯：{
allowDecimals:false，
标题：{
文字：“百万单位”
},
堆叠标签：{
启用：对，
对齐：“居中”
}
},
图例：{
启用：对，
浮动：是的，
垂直排列：“顶部”，
对齐：'左'，
布局：“垂直”，
y:100，
labelFormatter:function（）{
返回this.name+“-”+this.percentage.toFixed（2）+“%”；
}
},  
工具提示：{
pointFormat:“{point.percentage:.2f}%'，
格式化程序：函数（）{
返回此.point.name.toUpperCase（）；
}
}, 
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
深度：35，
数据标签：{
启用：false，
格式：“{point.percentage:.2f}%”，
} ,
内部尺寸：100，
深度：45，
showInLegend：对
},
},
系列：[
{
键入“pie”，
数据标签：{
垂直排列：“顶部”，
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
将该点返回到固定点（2）；
}
}
}，{点：{
活动：{
单击：函数（）{
}
}
}
}],
学分：{
已启用：false
}
});*

---

谢谢特里的回答。

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


});*