如何使 react-chartjs-2 在移动设备上响应？

Question

我在我的一个项目中使用 react-chartjs-2 并且我找不到图表的问题，因为在移动设备上所有标签和图例仍然很大。我试过了responsive: true，maintainAspectRation: true。没有任何效果

Answer 1

我已经为您制作了一个演示页面，说明我如何使我的 charjs 具有响应性。

基本上你需要给<canvas>元素height:100%并传递这些选项：

options: {
  maintainAspectRatio : false
}

根本不使用responsive: true，它似乎没有任何作用。

如果<canvas>您在某个容器内，我建议使该容器具有响应性（例如，使用 flexbox）。