javascript - 如何在 x 轴上格式化 Highcharts 中的日期?
问题描述
我将日期存储在需要在图表的 x 轴上显示的数组中。如何格式化日期以使其在 x 轴上正确呈现?
{
"xData": ["2020-10-01T19:30:00.000Z",
"2020-10-02T19:30:00.000Z",
"2020-10-03T19:30:00.000Z",
"2020-10-04T19:30:00.000Z",
"2020-10-05T19:30:00.000Z",
...
...
]
}
Highcharts.chart('container, {
chart: {
marginLeft: 40
},
title: {
text: ''
},
xAxis: {
categories: Date.UTC(xData),
},
yAxis: {
title: {
text: null
}
},
series: [{
data: dataset.data,
}]
});
解决方案
如果要将 x 轴与类别一起使用,请将日期字符串映射到具有所需格式的字符串的数组。
xAxis: {
categories: dataset.xData.map(date => {
return Highcharts.dateFormat('%Y-%m-%d', new Date(date).getTime());
})
}
现场演示:http: //jsfiddle.net/BlackLabel/oL1ncjes/
API 参考: https ://api.highcharts.com/class-reference/Highcharts#.dateFormat
但我认为更合适的解决方案是以[x, y]
格式创建数据,使用日期时间 x 轴类型和标签格式:
const processedData = dataset.data.map((dataEl, i) => {
return [new Date(dataset.xData[i]).getTime(), dataEl] // x, y format
});
Highcharts.chart('container', {
...,
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}'
}
},
series: [{
data: processedData
}]
});
现场演示:http: //jsfiddle.net/BlackLabel/y0dkzn1q/
推荐阅读
- google-cloud-bigtable - 从 Bigtable 导入表 - Google 云
- python - 从 settings.py 文件夹内的应用程序设置 AUTH_USER_MODEL
- excel - excel:查找每个组的最大日期的 total_log
- angularjs - 具有不同颜色AngularJs的clr-checkbox动态复选框集
- php - 我得到了似乎是一个无限循环的东西,无法弄清楚为什么 - PHP/WordPress
- cloudera - Cloudera Post 部署配置更新
- vue.js - Vuejs webpack 中 App.vue 与其他组件的关系
- aspnetboilerplate - 后台作业因“当前用户未登录应用程序”而失败
- python - 如何在python中的图像上设置水印文本
- flask - axios 使用烧瓶和 vuejs 发布多个数据