Highchart：带持续时间的条形图答案

【问题标题】：Highchart: Bar Chart with time durationHighchart：带持续时间的条形图
【发布时间】：2014-05-15 22:14:00
【问题描述】：

我想在底轴上创建一个持续时间的条形图。它适用于十进制数字，例如 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

有人知道如何实现这一点吗？

提前致谢！

【问题讨论】：

您的数据是什么样的？ x 值是时间格式（纪元毫秒）吗？
@Mark：原始数据是秒。但我想我可以使用 php 将其转换为我想要的任何内容
这些值是从什么开始的秒数？时代？一些任意值？您是否希望轴以 Hour:Min:Sec 显示这些值之间的差异？

标签： time highcharts bar-chart duration

【解决方案1】：

你需要设置最小值和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/

【讨论】：

【解决方案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);
            }
        },
    }]
});
});

【讨论】：

【解决方案3】：

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

    durationbar: {
        chart: {
            type: 'column'
        },
        yAxis: {
            type: 'datetime',
            showFirstLabel: false,
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S'
            },
            units: [[
                'millisecond',
                [1000]
            ], [
                'second',
                [1, 2, 5, 10, 15, 30]
            ], [
                'minute',
                [1, 2, 5, 10, 15, 30]
            ], [
                'hour',
                [1, 2, 3, 4, 6, 8, 12]
            ], [
                'day',
                [1]
            ], [
                'week',
                [1]
            ], [
                'month',
                [1, 3, 6]
            ], [
                'year',
                null
            ]],
        },
        tooltip: {
            formatter: null,
            pointFormat: '{point.name}: <b>{point.dataLabel.text.textStr}</b><br/>'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter() {
                        return this.series.chart.time.dateFormat('%H:%M:%S', this.y)
                    }
                }
            }
        }
    },

screenshot

【讨论】：