胜利图表图例自定义图标

Question

我想为胜利传奇添加自定义图标类型。我要显示的是线条而不是正方形或圆形（最终是一个完全自定义的图标-绘制为SVG或PNG）。如果有人知道如何实现这一目标，我将不胜感激。

{{1}}

Answer 1

您必须在VictoryLegend组件中添加此参数

dataComponent={<MyLine />}

在这样的初始组件之后

class MyLine extends React.Component {
  render() {
    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
    const line = datum.name === "Square" ? <line x1={x-5} y1={y} x2={x+5} y2={y} style={{stroke: '#fff', strokeWidth: 1, opacity: 1, fill: "none"}} /> : <line x1={x-5} y1={y} x2={x+5} y2={y} style={{stroke: '#fff', strokeWidth: 1, opacity: 1, fill: "none", strokeDasharray: 1}} />;
    return line;
  }
}