Question

我想使用ChartJS库制作响应式图表。在宽于430像素以上的屏幕上，一切正常，但是在此数量之下，图表变得很小，甚至消失了。我想使图形可见，如图3所示。

大于约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

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

Answer 2

您可以尝试给它一个min-width（大约200像素）和height: auto。

Answer 3

我知道这个帖子有点旧 - 但这对我有用

plugins: {
            legend: {
                display: true,
                position: function () {
                    //you can return position based on inner width of your display area
                    if (window.innerWidth < 600) {
                        return "bottom";
                    }

小屏幕上的ChartJS

3 个答案: