javascript - ChartJS 在小屏幕上

Question

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

超过 ~430 像素：

小于~430px：

我要怎么做：

编辑：目前它的样子：

<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

标签： javascriptcssreactjschart.js

Answer 1

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