图表 JS:回调转换后 x 轴上显示的所有值

Question

我想用Chart.Js来绘制一些数据与天数的关系。这些日期将从第 169 天(第 24 周第 1 天(到第 295 天(第 42 周第 1 天(。

我希望在 x 轴上显示所有日期的所有数据，但只显示一部分天数，如下所示。我希望 x 轴上的天数显示为周，并且仅显示每周的第一天。例如，第 169 天将显示为第 24 周，然后 x 轴上没有值，直到第 176 天，即第 25 周。我希望每周都以这种方式显示在 x 轴上。

我设法使用此回调函数在 x 轴上将天数转换为周：

ticks: {
//stepSize: 10, //This does nothing
callback: function(dataLabel, index) {
//Hide the label of the datasets except the beginning of the week. Display the 
week, not the day. Return null to hide the grid line, or '' to keep it.
return (dataLabel - 1) % 7 === 0 ? (Math.floor((dataLabel - 1) / 7)).toString() : null;
},

这似乎确实有效，因为我想转换为周的所有日子都转换为周，其余的返回为 null(在 x 轴上不显示任何值，也不显示行(。我可以通过手动调整图表大小和从我使用的控制台日志中判断这一点。但是，图表 Js 似乎选择要显示的这些转换周数的数量。我试图使用步长值无济于事。有没有办法强制图表.JS在 x 轴上添加所有这些转换后的周？

请参阅此 JsFiddle 进行演示： https://jsfiddle.net/Brett_Riverboat/6hkqb1yj/5/第 215 行是回调函数。

Answer 1

我通过禁用自动跳过功能来解决此问题。我以前尝试过但无法开始工作的东西。大概是因为我把它放在了错误的位置。

xAxes: 
[{
ticks: 
{
callback: function(dataLabel, index) {
//Hide the label of the datasets except the beginning of the week. Display the week, not the day. Return null to hide the grid line, or '' to keep it.
console.log("dataLabel = " + dataLabel + " (dataLabel - 1) % 7 " + (dataLabel - 1) % 7)
return (dataLabel - 1) % 7 === 0 ? (Math.floor((dataLabel - 1) / 7)).toString() : null;
},
fontSize: 16,
autoSkip: false,
},
scaleLabel: {
display: true,
labelString: 'Week'
}
}]