饼图重新图表没有响应答案

【问题标题】：PieChart recharts not responsive饼图重新图表没有响应
【发布时间】：2021-01-06 02:42:58
【问题描述】：

已经有其他资源似乎对某些人有用，但在这种情况下它不起作用，我无法找到解决方法。

类似资源：

我为它创建了一个沙盒here

解决此问题的建议是使用 ResponsiveContainer 组件（由 recharts 提供），但正如您在沙箱中看到的那样，这不起作用。

另外，recharts 和可查看的here 提供的原始示例也不起作用（尝试将 jsFiddle 示例的宽度和高度更改为 100vw 和 100vh，然后将窗口大小调整为 320px，您将看到文本裁剪）。

提到 Github 已关闭的问题，他们似乎指出了 cx、cy、innerRadius 和 outerRadius 属性设置为 px 而不是百分比的问题，这就是导致问题的原因，但提供的 jsFiddle 不起作用，我无法弄清楚如何用百分比来实现这一目标。

非常感谢您提供任何帮助，谢谢！

【问题讨论】：

当我调整窗口大小时，网格会分解，直到一行中只有一个项目。这不是你想要的吗？它看起来对我有反应。
网格没有问题，是图表 svg，它没有缩放，只是被裁剪了 - 在这里看截图：ibb.co/RDpkz1f
通过仅将innterRadius 和outerRadius 属性更改为百分比，我可以使其扩展。不幸的是，它仍然被裁剪。但是我在样式中找不到任何overflow: hidden，这很奇怪。

标签： reactjs recharts

【解决方案1】：

将高度和宽度设置为 99% 为我们解决了这个问题

&lt;ResponsiveContainer width="99%" height="99%"&gt;&lt;/ResponsiveContainer&gt;

【讨论】：

不确定这是否真的能解决问题。图表是响应式的，但它们不关心文本的大小或长度，所以你可能永远无法使其完全可缩放到 320 像素 - 这里的解决方案是根据分辨率调整字体大小，但它比听起来更复杂，因为您需要重新计算连接图表和文本的线条的位置（参见 @Vu Luu 答案)，除了缩小字体大小（你可能只需要 vmin 和 vmax）

【解决方案2】：

您的recharts 不起作用，因为您同时使用responsiveContainer 和grid 来强制响应。只做一件事。

从代码中移除宽度、高度限制 <ResponsiveContainer width="100%" height="100%">

或

从 CSS 中删除网格

...
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
...

前一种和后一种方法的沙盒是here & here

【讨论】：

这不是导致问题的原因，您可以注意到，在您的两个沙箱中，文本都被裁剪了。网格只是放置所有图表元素，问题在这里图表 svg 是否溢出了它自己的容器。

【解决方案3】：

主要问题是您如何计算ActiveShape 组件的位置。

  const RADIAN = Math.PI / 180;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius + 10) * cos;
  const sy = cy + (outerRadius + 10) * sin;
  const mx = cx + (outerRadius + 30) * cos;
  const my = cy + (outerRadius + 30) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  const ey = my;
  const textAnchor = cos >= 0 ? "start" : "end";

在我看来，我认为您应该使用挂钩来获取windown size。之后，您只需要检查ActiveShape 组件的位置是否在屏幕内。如果不是，你只需重新计算ex、ey、sx、sy、mx、my。玩得开心:)

【讨论】：

我认为这实际上可能是一个有效的解决方案，但我认为我们不应该仅仅为了响应而更新整个图表..

【解决方案4】：

以下解决方案对您有用吗？

sandbox link

我已将 cx、innerRadius 和 outerRadius 值从 px 更改为 % 值

【讨论】：

我不觉得这是一个解决方案，因为文本仍然被裁剪，但图表至少现在是响应式的..所以它肯定是迄今为止最好的答案，但不是一个解决方案，因为在 320px几乎不可能在不裁剪的情况下适应文本