javascript - 小屏幕上的 ChartJS

Question

我想使用 ChartJS 库制作响应式图表。在宽度大于 ~430px 的屏幕上一切正常，但在这个数量下，图表变得太小以至于消失。我想让图表像第三张图片一样可见

超过 ~430 像素:

小于 ~430 像素:

我想要它怎么样:

编辑:目前它的样子:

<div className="graph">
<Topic />
<Doughnut data={{
  labels: ['Red', 'Blue', 'Yellow', 'Green'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5],
    backgroundColor: [
      'rgba(255, 99, 132, 0.3)',
      'rgba(54, 162, 235, 0.3)',
      'rgba(255, 206, 86, 0.3)',
      'rgba(75, 192, 192, 0.3)',
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
    ],
    borderWidth: 1
  }]
}}
/>

那是我的代码，只需复制粘贴即可测试库。也许默认的高度和宽度会有所帮助，但我需要它响应。我怎样才能让它工作？

CSS 包装器看起来像这样:

.Statistics .graphContainer{
   background-color: black;
   background-color: rgba(0,0,0,0.75);
   border: black solid;
   border-width: 3px;
   border-radius: 5px;
   margin-top: 75px;
   padding: 10px;
}

.Statistics .graph{
   margin-left: 10px;
   margin-top: 10px;
}

此外，.graph 位于.graphContainer

Answer 1

我相信以下设置对您有用。在图表选项中设置responsive为true，maintainAspectRatio为false，样式设置为like max-height: 300px；宽度:自动；