ChartJS - 如何增加 label 在 x 軸上的最大旋轉度數？

Question

我有一個折線圖，起初，x 軸上的所有標簽都是完全水平的。 像這樣的東西：

現在如果添加更多數據，標簽開始旋轉：

直到它似乎達到了它可以旋轉的最大程度：

從表面上看，我認為最大度數是 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

您可以使用常用tick配置 object的maxRotation屬性進行配置。

您的代碼需要像這樣修改：

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

Answer 2

我認為問題的關鍵字不是旋轉，而是 xAxes 上的Tick 。 我認為這個鏈接可以幫助你：

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