Question

我想在底部轴上创建一个持续时间的条形图。它'适用于十进制数，如300.5秒，或50.3小时，但我想有以下格式：小时：分钟：秒。我尝试使用datalabelformat：datetime，但没有成功。

数据将是例如：
会员1 - 10:05:18
会员2 - 12:52:20
会员3 - 18:10:30
会员4 - 19:20:10
会员5 - 19:30:45

有人知道如何实现这个目标吗？

提前致谢！

Answer 1

您需要设置min值和tickInterval，然后设置dateTimeLabels。

dateTimeLabelFormats: {
            millisecond: '%H:%M:%S',
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        }

示例：

http://jsfiddle.net/TynTT/1/

Answer 2

我来到这里寻找解决问题的方法。不确定这是不是你想要的，我不能因为声誉低而发表评论。但这就是我能够解决它的方法。

这提供了hh：mm的结果。您可以将其修改为包括秒。 http://jsfiddle.net/TynTT/11/

它的y轴为hh：mm格式，并且还显示数据标签为hh：mm。

$(function () {
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    yAxis: {
        type: 'time',
        labels: {
            formatter: function () {
                var time = this.value;
                var hours1=parseInt(time/3600000);
                var mins1=parseInt((parseInt(time%3600000))/60000);
                return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
            }   
        }
    },
    series: [{
        data: [1000000, 26500000, 17000050, 79000000, 56000000, 124000000],
        dataLabels: {
            enabled: true,
            formatter: function () {
                var time = this.y / 1000;
                var hours1=parseInt(time/3600);
                var mins1=parseInt((parseInt(time%3600))/60);
                return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
            }
        },
    }]
});
});

Answer 3

我通过重用HC方法改进了上述配置：

$country.next(chosenCountry)

screenshot

Highchart：持续时间的条形图

3 个答案: