ChartJS 标签会缩小React图表中的饼图大小

hfsqlsce  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(190)

我使用的是react-chartjs-2(版本4.3.1)。如图所示,即使我使用相同的组件,由于标签的原因,宽度和高度也不再相同。我希望显示像左侧的piechart,即使右侧有许多标签。我该如何解决这个问题?

代码

<Pie
                        height={400}
                        data={{
                          labels: labels,
                          datasets: [
                            {
                              label: "Label 1",
                              data: data,
                              backgroundColor: [
                                palette.primary.main,
                                palette.utility.maroonRed,
                                palette.text.primary,
                                palette.primary.grey,
                                palette.secondary.dark,
                                palette.primary.subtle
                              ],
                            },
                          ],
                        }}
                        options={{
                          responsive: true,
                          maintainAspectRatio: false,
                          plugins: {
                            legend: {
                              display: true,
                              position: "bottom"
                            },
                          }
                        }}
                      />
                    )
7fyelxc5

7fyelxc51#

由于图表受画布大小的限制,因此您有3个选项:
1.使用过滤器回调限制显示的图例项的数量
1.将画布放大,以便图表有更多空间根据标签呈现所有内容
1.禁用图例,使其始终呈现相同大小

h9a6wy2h

h9a6wy2h2#

如果此用例可以接受,则可以在图例中仅包含数据集的子集(例如top5),而在另一个“其他”图例项中包含所有其他数据集。
第一个

相关问题