highcharts Highchart:带有持续时间的条形图

puruo6ea  于 12个月前  发布在  Highcharts
关注(0)|答案(3)|浏览(214)

我想创建一个底部轴上有持续时间的条形图。它适用于十进制数字,如300.5秒,或50.3小时,但我想有以下格式:小时:分钟:秒。我尝试了一些东西与datalabelformat:datetime,但没有成功。
例如,数据将是:
时间:2019 - 05 - 18 01:00:00
发布时间:2019 - 02 - 12 00:00:00
营业时间3 - 18:10:30
时间:2019 - 04 - 19 00:00:00
营业时间5 - 19:30:45
有人知道怎么实现吗?
提前感谢!

vsdwdz23

vsdwdz231#

您需要设置min value和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/

cld4siwp

cld4siwp2#

我来这里寻找一个解决我的问题.不知道这是否正是你想要的,我不能在评论由于低声誉.但这是我如何能够解决它.
这提供了以hh:mm为单位的结果。您可以修改它以包括秒。http://jsfiddle.net/TynTT/11/
它有hh:mm格式的y轴,也将数据标签显示为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);
            }
        },
    }]
});
});

字符串

sc4hvdpw

sc4hvdpw3#

我通过重用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)
                    }
                }
            }
        }
    },

字符串


的数据

相关问题