Javascript HighCharts 在 xAxis 上显示日期时间格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43667961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts show datetime format on xAxis
提问by lboyel
I am trying to display dateTime in day/weekly/month format on the x axis of high charts I have the data formatted as x utc date time format and y (magnitude). I was under the impression I only need to do this for it to work
我试图在高图表的 x 轴上以日/周/月格式显示日期时间我将数据格式化为 x utc 日期时间格式和 y（大小）。我的印象是我只需要这样做就可以了
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%e. %b",
month: "%b '%y",
year: "%Y"
}
},
series: [{
data: [
[1493326164493, 100],
[1493326194018, 120]
]
}]
});
What am I doing wrong? I have posted a fiddle link below for my scenario
我究竟做错了什么？我在下面为我的场景发布了一个小提琴链接
回答by morganfree
axis.dateTimeLabelFormatsworks a little bit different. In the first place, Highcharts tries to guess what is 'the best unit' of your data and, e.g. if it is a day, it will format it according to day property from dateTimeLabelFormats.
axis.dateTimeLabelFormats 的工作方式有点不同。首先，Highcharts 会尝试猜测数据的“最佳单位”是什么，例如，如果是一天，它将根据 dateTimeLabelFormats 中的 day 属性对其进行格式化。
If you want to just format axis labels, you can use axis.labels.formatand specify a format like this:
如果您只想格式化轴标签，可以使用axis.labels.format并指定如下格式：
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%b-%e}'
},
example: https://jsfiddle.net/dLfv2sbd/1/
回答by Leguest
You can try format date with
您可以尝试使用格式化日期
xAxis: {
labels: {
formatter: function(){
return moment(new Date(this.value)).format('DD'); // example for moment.js date library
//return this.value;
},
},
Also you can check documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter
您也可以查看文档http://api.highcharts.com/highcharts/xAxis.labels.formatter
回答by Samir
You can try this also -
你也可以试试这个——
- {value:%Y-%b-%e %l:%M %p }
- {值：%Y-%b-%e %l:%M %p }
labels: { format: '{value:%Y-%b-%e %l:%M %p }' },
labels: { format: '{value:%Y-%b-%e %l:%M %p }' },
Output- 2017-Apr-27 8:49 PM
输出 - 2017-Apr-27 8:49 PM
- format: '{value:%Y-%b-%e %l:%M}'
- 格式：'{value:%Y-%b-%e %l:%M}'
labels: { format: '{value:%Y-%b-%e %l:%M %p }' },
labels: { format: '{value:%Y-%b-%e %l:%M %p }' },
Output- 2017-Apr-27 8:49
输出 - 2017-Apr-27 8:49
- format: '{value:%Y-%b-%e}'
- 格式：'{值：%Y-%b-%e}'
labels: { format: '{value:%Y-%b-%e}' },
labels: { format: '{value:%Y-%b-%e}' },
Output - 2017-Apr-27
产出 - 2017-Apr-27
- format: '{value:%Y-%b-%e %H:%M}'
- 格式：'{value:%Y-%b-%e %H:%M}'
labels: { format: '{value:%Y-%b-%e %H:%M}' },
labels: { format: '{value:%Y-%b-%e %H:%M}' },
output 2017-Apr-27 20:49
输出 2017-Apr-27 20:49
回答by Alessandro Mattiuzzi
Simple year-month-day format:
简单的年月日格式：
format: '{value:%Y-%m-%e}'
