Chart.js縱橫比/強制高度

Question

我正在嘗試使用chart.js創建縮略圖，該縮略圖將鏈接到帶有完整圖表的頁面。鏈接頁面上的完整圖表看起來不錯，但對於縮略圖我無法獲得正確的大小。畫布覆蓋正確的區域，但圖形不會垂直填充。

var data = { 
    labels: ['','','','','','','','','',''], 
    datasets: [{ 
     data:[22,25,23,24,25,22,25,23,24,25], 
      backgroundColor: "rgba(54, 255, 170, 0.4)", 
      borderColor: "rgba(54, 255, 170, 1)", 
      orderWidth: 1, 
    }] 
}; 
var options = { 
    tooltips: false, 
    legend: { 
     display:false 
    }, 
    scales: { 
     yAxes: [{ 
      display:false, 
      ticks: { 
       beginAtZero:true 
      } 
     }], 
     xAxes: [{ 
      gridLines: { 
       color: "rgba(0, 0, 0, 0)", 
      } 
     }] 
    } 
}; 

new Chart($("#chart-"+this.model.id), { 
    type: 'bar', 
    data: data, 
    options: options   
}); 

我已經試過類似的東西調整畫布的最小高度，但引起條模糊。有什麼辦法可以調整酒吧的高度以佔據整個畫布？

Answer 1

嘗試設置這些選項：

options: { 
    responsive: true, 
    maintainAspectRatio: false 
} 

如果設置maintainAspectRatio爲true，高度將自動計算。