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

Question

我有一个圆环图，想要显示小时和分钟。使用带有持续可见向下钻取数据的 highcharts 饼图，这会导致我遇到一个大问题，请先看图片：

内部蓝色切片的值为 10.40，表示时间为 10:40。两个外部切片的值是 5.50 和 4.50，用小时和分钟加起来得到 10.40，但是 highcharts 不知道它是时间格式，所以它加起来是 10.00，这完美地说明了我的问题。

我尝试将 yAxis 类型设置为日期时间

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 到 0 的时间进行操作。工具提示用于将值格式化为可读格式。

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