ChartJS-如何增加x轴上标签旋转的最大程度？

Question

现在如果添加更多数据，标签开始旋转:

直到到达一个点，它似乎已经达到了它可以旋转的最大程度：

从表面上看，我认为最大度数是45度。现在，如果我添加更多的数据，而不是旋转更多的标签，它会删除两个标签中的每一个，变成这样:

如何将这个角度增加到90度，使标签旋转到完全垂直的程度？

这是我用于图表的代码：

new Chart(chart, {
  type: 'line',
  data: chart_data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      position: 'top',
      labels: {
        boxWidth: 5,
        usePointStyle: true
      }
    },
    events: ['click', 'mousemove'],
    onClick: clicked,
    pan: {
      enabled: true,
      mode: 'x',
      onPanComplete: function(event) {
        console.log(event)
      }
    },

    zoom: {
      enabled: true,
      mode: 'x'
    }
  }
});

Answer 1

我认为问题的关键词不是旋转，而是xAxes上的滴答声。我认为这个链接可以帮助你：

https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration

也

Chart.js：使用maxTicksLimit时均匀分布刻度

xAxes: [{
    ticks: {
        autoSkip: false, // Skip or not?
        maxTicksLimit: 30 // How much?
    }
}]

正如@timclutton在这里所说的那样，旋转可以提供帮助：https://stackoverflow.com/a/58275468/7514010

Answer 2

您可以使用通用< code>tick配置对象的< code>maxRotation属性对此进行配置。

您的代码需要修改，如下所示：

options: {
  scales: {
    xAxes: [{
      ticks: {
        maxRotation: 90
      }
    }],
    yAxes: [{
      ...