如何在Chart.js v2中格式化X轴时间刻度值 [英] How to format x-axis time scale values in Chart.js v2
问题描述
当我通过 options.scales.xAxes.time.tooltipFormat
将鼠标悬停在折线图上的数据点上时,可以设置工具提示的格式,但是我似乎看不到为x轴刻度线做它。我的 data.labels
是一个矩对象的数组。它们显示为 MMM DD,YYYY
(例如2012年2月23日),但我想删除年份。
I am able to format the tooltips when I hover over a datapoint on a line chart via options.scales.xAxes.time.tooltipFormat
, but I can't seem to do it for the x-axis tick lables. My data.labels
is an array of moment objects. They display as "MMM DD, YYYY"
(e.g. Feb 23, 2012), but I want to drop the year.
推荐答案
只需将所有选定时间单位的 displayFormat
设置为 MMM DD
Just set all the selected time unit's displayFormat
to MMM DD
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
}
...
请注意,我已将所有设备的显示格式设置为 MMM DD
。如果您可以控制数据范围和图表大小,则更好的方法是强制设置单位,例如
Notice that I've set all the unit's display format to MMM DD
. A better way, if you have control over the range of your data and the chart size, would be force a unit, like so
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'MMM DD'
}
...
小提琴- http ://jsfiddle.net/prfd1m8q/
这篇关于如何在Chart.js v2中格式化X轴时间刻度值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!