javascript - 胜利图表图例自定义图标

Question

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

<VictoryLegend x={825} y={0}
  orientation="vertical"
  gutter={10}
  style={{ border: { stroke: "black" }, title: {fontSize: 20} }}
  style={{ title: {fontSize: 10 } }}
  data={[
    { name: "Square", symbol: { fill: "black", type: "square" } },
    { name: "Line", symbol: { fill: "blue", type: "line" }},
  ]}
/>

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;
  }
}