recharts PieChart 抑制饼图选择边框

问题描述 投票:0回答:5

使用 recharts PieChart 实现,我想自定义选定饼图元素周围的边框。在教程中它是黑色的,带有圆角:

enter image description here

我尝试禁用它,即将自定义侦听器附加到单击事件 - 但边框仍然按原样显示,即使(我认为)我消耗了这些事件。

  data: 'productivity' | 'recreation' | 'tbd' | undefined;
};

export const ContentGraph = React.memo(({ data }: ContentGraphProps) => {
  const content = getContent();

  const consumeChartClick = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Click");
    return;
  }
  const consumeChartDown = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Down");
    return;
  }

  const consumeChartUp = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Up");
    return;
  }

  const consume = function(data: any, index: number, e: React.MouseEvent) {
    // do nothing
    // e.stopPropagation;
    console.log("Consuming pie click");
    return;
  }

  if (!data) return null;

  return (
    <>
      <ResponsiveContainer width="100%" height={140}>
        {/* investigate on github, generateCategoricalChart.tsx */}
        <PieChart onClick={consumeChartClick} onMouseDown={consumeChartDown} onMouseUp={consumeChartUp}>
          <Pie data={data} innerRadius={40} outerRadius={70} paddingAngle={1} dataKey="count" onclick={consume}>
            {data.map(({ curr }) => (
              <Cell key={curr} fill={content: content[curr].color} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <Legend>
        {data.map(({ curr }) => (
          <LegendRow key={curr}>
            <LegendTerm color={content[curr].color} />
            <LegendDescription>{content[curr].name}</LegendDescription>
          </LegendRow>
        ))}
      </Legend>
    </>
  );
});

据我了解,应该抑制边界,但它仍然显示? 输出显示在控制台中 - 但不需要的边框也是如此。

typescript pie-chart recharts
5个回答
10
投票

只需将

outline: none
添加到单元格中的样式即可。

<Cell style={{outline: 'none'}} key={curr} fill={content: content[curr].color} />

3
投票

您可以在全局样式文件或样式组件中添加以下 CSS

g&:focus,
path&:focus {
  outline: none !important;
}

这将解决轮廓问题


0
投票

上面的答案只部分解决了我的问题。就我而言,我可以使用

Pie
删除
style={{outline: 'none'}}
的轮廓,但我的标签仍然导致轮廓显示。

通过在 CSS 中添加以下内容来修复它:

.recharts-wrapper>svg>g {
    outline: none !important;
}

0
投票

在全局css中,添加以下css代码。

 .recharts-layer {
  outline: none !important;
}

这对我有用。


0
投票
.recharts-pie * {
  outline: none !important;
}
© www.soinside.com 2019 - 2024. All rights reserved.