[英]Time scale formatting issues with chartjs, mostly unitStepSize
我很喜欢chartjs,但是在时间范围上,我一直难以获得确切的格式。 我所追求的是以下几点:
我一直在使用以下xAxes设置:
xAxes: [{
type: 'time',
unit: 'day',
unitStepSize: 10,
minUnit: 'day',
time: {
displayFormats: {
day: 'D-MMM',
week: 'D-MMM',
month: 'D-MMM',
quarter: 'D-MMM',
}
}
}]
我的日期以“ YYYY-MM-DD”格式使用。
现在,它似乎正在忽略unitStepSize
。
可以在这里找到完整的示例: https : //jsfiddle.net/koendirckx/fqhv8cjs/5/
在自己为同一问题苦苦挣扎了比我应该做的更长的时间之后,我终于注意到Chartjs文档中的精美字体,该文档位于http://www.chartjs.org/docs/#scales-time-units该unitStepSize参数需要定义在时间子选项中。
我在做:
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD',
},
},
ticks: {
fontColor: "black",
fontSize: 12,
fontStyle: "normal",
fontFamily: "Segoe UI",
},
unitStepSize: 7,
}],
yAxes: yAxes
},
当我应该做的时候:
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD',
},
unitStepSize: 7,
},
ticks: {
fontColor: "black",
fontSize: 12,
fontStyle: "normal",
fontFamily: "Segoe UI",
},
}],
yAxes: yAxes
},
在更广泛的上下文中:(请注意eleChart1是图表的画布DOM元素,而yAxis,数据集和ChartName是在示例之外构建的对象/变量。)
var Chart1 = new Chart(eleChart1, {
type: 'line',
lineWidth: 15,
data: {
datasets: datasets,
},
options: {
showPointLabels: true,
legend: {
display: true,
//position: "bottom"
},
title: {
display: true,
text: ChartName,
fontSize: 18,
fontStyle: "bold",
fontFamily: "Segoe UI"
},
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD',
},
unitStepSize: 7,
},
ticks: {
fontColor: "black",
fontSize: 12,
fontStyle: "normal",
fontFamily: "Segoe UI",
},
}],
yAxes: yAxes
},
}
});
底线:将unitStepSize选项放入时间对象后,它按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.