Question

我正在用图表绘制这样的图表

<ResponsiveContainer width="100%" height={175}>
        <LineChart data={chartData}
              margin={{top: 5, right: 30, left: 0, bottom: 5}}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
        <Legend fontSize="1" />
        <Line name="New users" type="linear" dataKey="pv" stroke="#005172" strokeWidth="1" activeDot={{r: 4}}/>
        <Line name="Logged users" type="linear" dataKey="uv" stroke="#EC6660" strokeWidth="1" />

        <Line name="New users forecast" type="linear" dataKey="trend" strokeDasharray="3 3" stroke="#69C568" strokeWidth="3" /> 

        </LineChart>
      </ResponsiveContainer>

以上工作正常。

现在，我需要对<Line>进行一些更改，因此我创建了一个新组件CustomLine并将其包含在上面的代码中，但是该行没有绘制。

这是自定义行组件的代码

class CustomLine extends Component {
  constructor() {
    super();

    this.handleActiveDotClick = this.handleActiveDotClick.bind(this);
  }
  handleActiveDotClick(dot, evt) {
    console.log(evt);
  }

  render() {
    return(
      <Line name="New users forecast" type="linear" dataKey="trend" strokeDasharray="3 3" stroke="#69C568" strokeWidth="3" activeDot={{cursor: 'pointer', onClick: this.handleActiveDotClick  }} dot={{strokeDasharray: 'none'}} />
    );
  }
}

我像这样使用这个组件

<ResponsiveContainer width="100%" height={175}>
            <LineChart data={chartData}
                  margin={{top: 5, right: 30, left: 0, bottom: 5}}>
            <XAxis dataKey="name"/>
            <YAxis/>
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Legend fontSize="1" />
            <Line name="New users" type="linear" dataKey="pv" stroke="#005172" strokeWidth="1" activeDot={{r: 4}}/>
            <Line name="Logged users" type="linear" dataKey="uv" stroke="#EC6660" strokeWidth="1" />

           <CustomLine />

            </LineChart>
          </ResponsiveContainer>

但是这条线没有密谋！我在这里做错什么了吗？

使用React组件时，图表无法正确绘制

0 个答案: