javascript - Chart.js 纵横比/强制高度

Question

我正在尝试使用 chart.js 创建缩略图，该缩略图将链接到具有完整图表的页面。
链接页面上的完整图表看起来不错，但对于缩略图，我无法正确调整大小。 Canvas 覆盖了正确的区域，但图表没有垂直填充它。

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        
});

我尝试过调整 Canvas 的最小高度之类的方法，但这会导致条形模糊。
有什么办法可以调整条的高度以占据整个 Canvas ？

Answer 1

尝试设置这些选项:

options: {
  responsive: true,
  maintainAspectRatio: false
}

如果将maintainAspectRatio 设置为true，则会自动计算高度。