如何定制VictoryTooltip
如何定制VictoryTooltip
提问于 2018-08-01 10:48:40
我已经使用VictoryCharts实现了一个饼图，并添加了工具提示...
<VictoryPie
labelComponent={<VictoryTooltip cornerRadius={0} />}
colorScale={["tomato", "orange", "gold", "cyan", "navy" ]}
padAngle={0.5}
innerRadius={100}
width={400} height={400}
style={{
labels: { fontSize: 15, fill: "black"},
data: {
fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3
}
}}
labelRadius={90}
data = {data_distribution}
/>工具提示如下所示...
我想删除箭头，并使工具提示成为一个规则的矩形，并更改背景颜色。从本质上讲，我想对其进行自定义，但事实证明这比我预期的要难。
我尝试创建自定义组件...
class CustomFlyout extends Component {
render() {
const {x, y} = this.props;
return (
<div style={{"background": "red"}}>
<p>x</p>
</div>
);
}
}我添加到VictoryTooltip..。
<VictoryTooltip
cornerRadius={0}
flyoutComponent={<CustomFlyout/>}
/>然而，这并不起什么作用。我不知道如何制作一个自定义的工具提示。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-04 04:35:33
您可以自定义VictoryTooltip并设置所需的样式，如下所示。
<VictoryTooltip
cornerRadius={0}
pointerLength={0}
flyoutStyle={{
stroke: "none",
fill: "blue"
}}
/>请参阅this example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51624710
复制相关文章
相似问题