我能够通过options.scales.xAxes.time.tooltipFormat
格式化当我在线图上悬停在数据点上时显示的工具提示,但似乎无法对x轴刻度标签进行格式化。我的data.labels
是由moment对象组成的数组。它们显示为"MMM DD, YYYY"
(例如Feb 23, 2012),但我想去掉年份。
我能够通过options.scales.xAxes.time.tooltipFormat
格式化当我在线图上悬停在数据点上时显示的工具提示,但似乎无法对x轴刻度标签进行格式化。我的data.labels
是由moment对象组成的数组。它们显示为"MMM DD, YYYY"
(例如Feb 23, 2012),但我想去掉年份。
将所有选定的时间单位的displayFormat
设置为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
。如果您可以控制数据范围和图表大小,则更好的方法是强制使用单位,如下所示:
请注意,本人已将所有单位的显示格式设置为 MMM DD
。如果您能够掌控数据范围和图表大小,更好的方法是强制使用单位,例如:
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'MMM DD'
}
...
Fiddle - http://jsfiddle.net/prfd1m8q/
'2021-03-10'
),而不是一个易于处理的对象,如moment
时间对象,您最好通过在time
方法中添加parser: 'YYYY-MM-DD'
来告诉jschart
如何解析该字符串。总体上,脚本看起来像这样:type: 'time',
time: {
parser: 'YYYY-MM-DD',
unit: 'day',
unitStepSize: 1,
displayFormats: {'day': 'MMM DD',}
} - seedmeticks: {
callback: function(value) {
return new Date(value).toLocaleDateString('de-DE', {month:'short', year:'numeric'});
},
},
new Date
没有起作用,因为我正在对一个字符串进行操作,例如“Feb 2017”。而IE似乎并不喜欢这样。 - Cedric我有一个不同的用例,我希望根据图表中数据的起始时间和结束时间之间的时间跨度来使用不同的格式。我发现这是最简单的方法。
最初的回答:
let xAxes = {
type: "time",
time: {
displayFormats: {
hour: "hA"
}
},
display: true,
ticks: {
reverse: true
},
gridLines: { display: false }
}
// if more than two days between start and end of data, set format to show date, not hrs
if ((parseInt(Cookies.get("epoch_max")) - parseInt(Cookies.get("epoch_min"))) > (1000 * 60 * 60 * 24 * 2)) {
xAxes.time.displayFormats.hour = "MMM D";
}
在将日期添加到数组之前,您可以对其进行格式化。这就是我所做的。我使用了AngularJS。
//convert the date to a standard format
var dt = new Date(date);
//take only the date and month and push them to your label array
$rootScope.charts.mainChart.labels.push(dt.getDate() + "-" + (dt.getMonth() + 1));