如何从图表库中删除出现在饼图扇区上的蓝色矩形？

Question

当单击图表库中饼图中的某个扇区时，我希望不出现蓝色矩形。 React 应用程序中正在使用 recharts 库。

<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"
        >
          <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
          {data.map((entry, index) => (
            <Cell stroke="5" 
            style={{
                filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`
              }}
              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>

Answer 1

您应该将

outline: none

添加到图表元素

<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"
  >
    <Tooltip cursor={{ stroke: "red", strokeWidth: 2 }} />
    {data.map((entry, index) => (
      <Cell
        stroke="5"
        style={{
          filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`,
          outline: "none",
        }}
        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
        style={{ outline: "none" }}
        key={`cell-${index}`}
        fill={COLORS[index % COLORS.length]}
      />
    ))}
  </Pie>
</PieChart>;

Answer 2

您可以在

outline: none

组件中添加

<Pie/>

            <Pie
              ...
              style={{outline: 'none'}}
            />