React-chartjs-2 动态更新高度

Question

我正在使用react-chartjs-2库。我使用过HorizantalBar，它将通过props从父组件动态接收数据。我已经将 HorizantalBar 包裹在一个div 中，以根据数据控制其高度。高度在div 中更新，但在图表中更新，除非浏览器刷新/调整大小。我检查并检查了元素。图表的画布元素的高度在重新渲染时没有更新。有人可以帮忙吗？

<div className={classes.chart}  style={{ height: calculateHeight()}}>
<HorizontalBar data={dataHorizontal}
ref={(reference) => { chartReference = reference }}
options={chartOptions}>
</HorizontalBar>
</div>
function calculateHeight() {
let length = arrayData ? arrayData.length : 0
switch (true) {
case length >= 0 && length <= 7:
// console.log("1");
return 50 + length * 50;
case length > 8:
// console.log("2");
return 450 + ((length - 8) * 50);
default:
// console.log("3");
return 450
}
}

Answer 1

我偶然发现了一个类似的问题。我最好的解决方案是添加以下代码。

responsive: true

和

maintainAspectRatio: true