如何自定义 VictoryTooltip

Question

我使用 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/>}
 />

但是，这没有任何作用。我不知道如何制作自定义工具提示。

Answer 1

您可以自定义 VictoryTooltip 并像这样设置您需要的样式..

<VictoryTooltip
    cornerRadius={0}
    pointerLength={0}
    flyoutStyle={{
        stroke: "none",
        fill: "blue"
    }}
/>

见this example

如何自定义 VictoryTooltip

How to customize VictoryTooltip

reactjs

victory-charts