PieChart图表不响应

问题描述

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

相似资源：

• Stack Overflow
• Github recharts
• Github recharts

我为此here创建了一个沙箱

解决此问题的方法是使用ResponsiveContainer组件（由图表提供），但这在沙盒中看不到。

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

关于Github的已解决问题，似乎他们指出了将cx，cy，innerRadius和outerRadius属性设置为px而不是百分比的问题，这就是导致该问题的原因，但是提供的jsfiddle无法正常工作，我无法弄清楚如何用百分比来实现。

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

解决方法

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

sandbox link

我将cx，innerRadius和externalRadius值从px更改为％值

,

主要问题是如何计算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。玩得开心：）

,

您的recharts无法正常工作，因为您同时使用了responsiveContainer和grid来强制响应。只做一件事。

• 从代码中删除宽度和高度限制 <ResponsiveContainer width="100%" height="100%">

OR

• 从CSS删除网格

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

前一种和后一种方法的沙盒为here和here

,

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

<ResponsiveContainer width="99%" height="99%"></ResponsiveContainer>