Question

我有一张Highcharts柱形图，其中包含24个不同的y值，对应于0-23的x值，表示当天的小时。

Highcharts是否具有小时0-23的内置格式，这样我就可以让X轴显示时间标签，如下所示：

早上12点，凌晨1点......中午12点，下午1点.....晚上11点？

我试过了，但是Highcharts忽略了x值：

series: [{
   name: 'Time of Day',
   data: [['12am', 6],['1am', 1],['3am', 1],['5am', 1],['7am', 2],['8am', 19],['9am', 54],['10am', 80],['11am', 73],['Noon', 92],['1pm', 105],['2pm', 87],['3pm', 100],['4pm', 74],['5pm', 59],['6pm', 38],['7pm', 24],['8pm', 7],['9pm', 10],['10pm', 4],['11pm', 8],]
}]

编辑：

数据可能不包含每小时的值，您可以在此示例数据中看到。

Answer 1

您可以使用php strftime格式http://php.net/manual/en/function.strftime.php指定要显示的日期/时间格式。

因此，例如，如果您想要将小时数（显示时间和时间）和分钟数（显示时间和时间）更改为12小时格式，请使用%I代替%H。< / p>

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        day: '%e of %b',
        minute:  '%I:%M',
        hour: '%I:%M'
    }
}

jsfiddle - http://jsfiddle.net/xya6kato/

Answer 2

您可以单独定义x轴标题和系列。

        xAxis: {
            categories: ['12 am', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm']
        }

        series: [{               
            name: 'Time of Day',
            data: [6, 1, 3, 1, 1, 3, 2, 19, 30, 54, 80, 73, 92, 105, 87, 100, 59, 38, 24, 7, 10, 4, 8, 10]
        }]

Edit-- 如果您没有所有小时的数据，则可以将xAxis定义为日期时间，并在特定时间内提供系列中的值。

        xAxis: {
            type: 'datetime',
        },
        series: [{
            name: 'Time of Day',
            data: [
                [Date.UTC(2014, 2, 28, 10), 5  ],
                [Date.UTC(2014, 2, 28, 12), 33 ],
                [Date.UTC(2014, 2, 28, 13), 20 ],
                [Date.UTC(2014, 2, 28, 15), 26 ]
            ]
        }]

Highcharts 12小时时间格式的x轴标签

2 个答案: