Question

背景信息：我跟踪每天发生一次的游戏更新，因此我在数据库中添加了一个unix时间戳（以毫秒为单位），这一切都正常。

我不知道的是如何使高图的y轴成为一个静态的＆＃39; 24小时不等。我想要的是这样的：

（别看我的油漆技巧）

我已经让x轴正常工作，但我不知道如何将y轴设置为正确的24h范围。

我目前的进展：

$('#chart').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
    },
    yAxis: {
        labels: {
            formatter: function() {
                return moment.utc(this.value).format('HH:mm:ss');
            }
        },
        title: {
            text: 'static 24h range on this axis'
        },
    },
    series: [{
        name: 'time',
        data: [[1447459200000, 1447498374000],         [1447545600000, 1447559210000]]
    }]
});

http://jsfiddle.net/yrqzcys2/8/

有没有办法实现这一目标，我已经四处寻找，无法找到解决这种情况的方法。

感谢任何帮助！

编辑：

因此系列中的数据是转换为日期时间的unix时间戳，它将包含日期和时间。基本上我想要x轴上的日期和y轴上的时间。因此，y轴上的24小时范围。

Answer 1

通过计算秒数，我在jlbriggs的帮助下想出来了。这是通过从精确的unix时间戳减去00:00上的日期的unix时间戳来完成的。

http://jsfiddle.net/yrqzcys2/16/

$(function() {
    var data = [];
/* Pretend that this part of code is in a loop and add an array to the main data array */
    //                            from database
    var datetime = moment.utc("2015-11-14 10:52:54");
    var day = moment.utc(datetime.format('YYYY-MM-DD')).valueOf();
    var exact = datetime.valueOf();
    var temp = [];
    temp.push(day);
    temp.push(exact - day);
    data.push(temp);
    /* End of loop */

    $('#chart').highcharts({


    chart: {
            type: 'column'
        },
        xAxis: {
            type: 'datetime',
            tickInterval: 24 * 3600 * 1000,
        },
        yAxis: {
            labels: {
                formatter: function() {
                    return moment.utc(this.value).format('HH:mm:ss');
                }
            },
            title: {
                text: 'Now shows a \'static\' range'
            },
            tickInterval: 3600 * 1000,
        },
        tooltip: {
            useHTML: true,
            formatter: function() {
                return moment.utc(this.y, 'x').format('HH:mm:ss z');
            }
        },
        series: [{
            name: 'time',
            data: data
        }]
    });
});

如何在列高图的y轴上设置24h范围

1 个答案: