在 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 using some of the pie-donut demo 代码以像您的示例图片一样为切片着色。

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

Using hours and minutes as data in highcharts donut chart

highcharts

pie-chart

dataformat