饼图重新绘制图表没有响应

Question

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

类似资源：

• 堆栈溢出
• Github 重新图表
• Github 重新图表

我为它创建了一个沙箱这里

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

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

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

任何帮助意见将不胜感激，谢谢！

Answer 1

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

沙盒链接

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

Answer 2

主要问题是如何计算

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";

在我看来，我认为你应该使用钩子来获取窗口大小。之后，您只需检查

ActiveShape

组件的位置是否在屏幕内。如果不是，您只需重新计算

ex

、

ey

、

sx

、

sy

、

mx

、

my

。玩得开心:)

Answer 3

您的

recharts

不起作用，因为您同时使用

responsiveContainer

和

grid

来强制响应。只做一件事。

• 从代码中删除宽度、高度限制

  <ResponsiveContainer width="100%" height="100%">

或

• 从 CSS 中删除网格

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

前一种方法和后一种方法的沙箱位于 here & here

Answer 4

遇到同样的问题..添加一个带有flex类的div，justify-center对我有用..

<div className="flex justify-center items-center">
         <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie
          data={data}
          cx={120}
          cy={200}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Pie
          data={data}
          cx={420}
          cy={200}
          startAngle={180}
          endAngle={0}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
      </PieChart>
      </div>

Answer 5

遇到同样的问题..添加一个带有flex类的div，justify-center对我有用..

<div className="flex justify-center items-center">
         <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
        <Pie
          data={data}
          innerRadius={60}
          outerRadius={80}
          fill="#8884d8"
          paddingAngle={5}
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        </PieChart>
      </div>

Answer 6

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

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