使用Highcharts在x轴上显示小时和分钟

Question

我想在区域图表中输出以下数据(时间,电池电量):

data: [
    [08.15, 14.8],
    [08.20, 13.9],
    [08.25, 12.8],
    [08.30, 11.8],
    [08.35, 13.9],
    [08.40, 14.1],
    [08.45, 13.9],
    [08.50, 14],
    [08.55, 14],
    [09.00, 14.1],
    [09.05, 14.4]
]

x轴应该从上午00.00 AM 00.00 PM开始,一整天.

不幸的是,当我查看API时,我不明白使用哪些选项.我现在得到的是x轴,从8.00到8.55,8.60,8.65~9.00.所以它使用十进制系统而不是分钟系统.

如何配置该线路应包含24小时60分钟？

使用当前数据,图表将是空的,仅在早上8点到9点之间有点.

我希望有人可以帮助我.

谢谢,

Mattijs

Answer 1

您可以尝试使用此代码以12小时的时间格式制作x轴

xAxis: {
    title: {
        enabled: true,
        text: 'Hours of the Day'
    },
    type: 'datetime',

    dateTimeLabelFormats : {
        hour: '%I %p',
        minute: '%I:%M %p'
    }
},

也为"工具提示"试试这个:

tooltip: {
    formatter: function() {
        return ''+
                "" +
                'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
    }
},

当然系列会是:

series: [{
        data: [
            [Date.UTC(2013, 3, 22, 1, 15), 12.7], 
            [Date.UTC(2012, 3, 24, 3, 20), 13.5], 
            [Date.UTC(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

希望它能解决你的问题.谢谢.

Answer 2

Highcharts有一个内置的方式来绘制时间或日期作为xaxis.通常,在这种情况下,您的数据将使用以毫秒为单位的时间值,而highcharts将相应地绘制它(请参阅此示例).

如果您希望每天24小时都包含数据,则可能如下所示:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime' //ensures that xAxis is treated as datetime values
    },

    series: [{
        data: [
            [Date.UTC(2012, 5, 22, 8, 15), 14.8], 
            [Date.UTC(2012, 5, 22, 8, 20), 13.9], 
            [Date.UTC(2012, 5, 22, 8, 25), 12.8]
            //and so on...
        ]
    }]
});

然后,您可以使用自定义xAxis格式化程序或日期格式化程序来显示所需的标签.