Chart.js中的水平xAxis標籤

Question

我正在處理一個圖表-js條形圖，它必須放在一個小格子裏面，所以我正在尋找一種方法來使x軸中的標籤水平而不是對角線。關鍵是要爲實際酒吧獲得儘可能多的高度，因爲現在標籤消耗了將近40％的可用空間。

這是我的代碼：

let options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
     }], 
     xAxes: [{ 
      display: false 
     }] 
    } 
}; 
let ctx = document.getElementById('barChartCtx'); 
let barChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

我已暫時禁用x軸的標籤。它的作品，但理想情況下，我希望他們是水平的。思考？

Answer 1

你可以使用刻度maxRotation和minRotation屬性來控制這個。

下面是一個例子。

let options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
     }], 
     xAxes: [{ 
      ticks: { 
       minRotation: 0 
       maxRotation: 0 
      } 
     }] 
    } 
}; 

請記住，他們是對角線的原因是因爲chart.js之計算，他們將不適合於它們的默認水平方向。如果你發現它們在水平時相互溢出，那麼你仍然可以使用上面的屬性來調整旋轉，因此它們只是略微對角。