首页 文章

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

提问于
浏览 次
2

我有一个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],]
}]

编辑：

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

highcharts

2 回答

  • 0

    您可以单独定义x轴 Headers 和系列 .

    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]
        }]

    编辑 - 如果您没有所有小时的数据，则可以将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 ]
            ]
        }]
    回复于
  • 7

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

    因此，例如，如果您想要将小时数（何时以及是否显示）和分钟（何时以及是否显示）更改为12小时格式，请使用 %I 而不是 %H .

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

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

    回复于

相关问题