javascript - Chart.js - 水平移动/交错标签(对于 x 轴)而不是旋转

Question

我不想旋转 x 轴的标签，所以我通过设置 maxRotation: 0 禁用了该行为。当然，如果我缩放图表，标签会重叠:

我希望标签表现得像这样:

标准的 chart.js 选项是否可行？或者有其他方法可以实现吗？

编辑:这是一个显示行为的codepen:https://codepen.io/JohnArcher/pen/wmeEMV

Answer 1

尝试在 x 轴刻度上使用 autoSkip 选项。

xAxes: [{
        display: true,
        position: 'bottom',
        ticks: {
          autoSkip: true
        }
}]}

https://www.chartjs.org/docs/latest/axes/

A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.

如果这不能解决您的问题，请尝试使用 maxRotation、minRotation。

xAxes: [{
        display: true,
        position: 'bottom',
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 90
        }
}]}

https://www.chartjs.org/docs/latest/axes/cartesian/