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，高度将自动计算。