使用小时和分钟作为highcharts圆环图中的数据

Question

我有一个圆环图，想要显示小时和分钟。使用具有恒定可见钻取数据的highcharts饼图，这导致了一个大问题，请先看图片：

内部蓝色切片的值为10.40，表示时间为10:40。两个外部切片的值分别为5.50和4.50，总计为小时和分钟，结果为10.40，但是highcharts并不知道它是时间格式，所以它总计为10.00，这完美地显示了我的问题。

我尝试将yAxis类型设置为datetime

type: 'datetime',

到目前为止没有任何改变。我找到了其他条目，如Pass time values to Highcharts Column chart，这让我感到无能为力。

我错过了什么吗？很高兴得到任何帮助。

Answer 1

最小的示例解决方案，使用毫秒值仅显示小时和分钟（JSFiddle）：

var m = 1000 * 60;
var h = m * 60;

$('#container').highcharts({
    chart: {
        type: 'pie'
    },
    tooltip: {
        formatter: function() {
            return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%H:%M', new Date(this.y));
        }
    },
    series: [{
        name: 'Inner',
        data: [
            { name: 'A', y: (10 * h) + (40 * m), color: 'blue' }, 
            { name: 'B', y: (3 * h), color: 'red' }, 
        ],
        size: '60%'
    }, {
        name: 'Outer',
        data: [
            { name: 'A1', y: (5 * h) + (50 * m), color: 'blue' }, 
            { name: 'A2', y: (4 * h) + (50 * m), color: 'blue' }, 
            { name: 'B1', y: (3 * h), color: 'red' }, 
        ],
        size: '100%',
        innerSize: '60%'
    }]
});

这里我们只是从0开始运行。工具提示用于以可读格式格式化值。

使用某些this more elaborate JSFiddle demonstration代码查看pie-donut demo，为您的示例图片上的切片着色。