React Chart js 在缩放时会破坏标签

Question

我们目前有针对小屏幕的缩放规则。它将缩放至 80%。 但这破坏了 Chart.js 中的饼图。

当我们使用大屏幕，页面缩放为100%时，我们可以在图表中选择要过滤的标签。但是，当屏幕很小，页面缩放为80%时，我们无法选择标签来过滤它。

有人可以帮忙解决吗？

<Pie
              data={{
                labels: ['Bug', 'Task', 'Sub-task', 'Story', 'Epic'],
                datasets: [
                  {
                    label: 'No. of Issues',
                    data: [
                      findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
                        .bug,
                      findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
                        .task,
                      findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
                        .subtask,
                      findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
                        .story,
                      findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
                        .epic,
                    ],
                    backgroundColor: [
                      softRed,
                      softYellow,
                      'pink',
                      softBlue,
                      softGreen,
                    ],
                    borderWidth: 1,
                  },
                ],
              }}
              options={{
                responsive: true,
                plugins: {
                  legend: {
                    position: 'bottom',
                  },
                },
              }}
            />

Answer 1

您可以点击链接 chartjs.org/docs/latest/configuration/responsive.html 并在链接中阅读配置选项。

options={{ 
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { position: 'bottom', },
 }, }} 

// 设置为 false 以防止图表保持纵横比。