使用 recharts PieChart 实现,我想自定义选定饼图元素周围的边框。在教程中它是黑色的,带有圆角:
我尝试禁用它,即将自定义侦听器附加到单击事件 - 但边框仍然按原样显示,即使(我认为)我消耗了这些事件。
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>
</>
);
});
据我了解,应该抑制边界,但它仍然显示? 输出显示在控制台中 - 但不需要的边框也是如此。
只需将
outline: none
添加到单元格中的样式即可。
<Cell style={{outline: 'none'}} key={curr} fill={content: content[curr].color} />
您可以在全局样式文件或样式组件中添加以下 CSS
g&:focus,
path&:focus {
outline: none !important;
}
这将解决轮廓问题
上面的答案只部分解决了我的问题。就我而言,我可以使用
Pie
删除 style={{outline: 'none'}}
的轮廓,但我的标签仍然导致轮廓显示。
通过在 CSS 中添加以下内容来修复它:
.recharts-wrapper>svg>g {
outline: none !important;
}
在全局css中,添加以下css代码。
.recharts-layer {
outline: none !important;
}
这对我有用。
.recharts-pie * {
outline: none !important;
}