Диаграммы отображаются неправильно при использовании компонента React - PullRequest
Новая
       9

Диаграммы отображаются неправильно при использовании компонента React

0 голосов
/ 24 сентября 2018

Я строю график, подобный этому, с повторными графиками 

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

Но линия не отображается !!Я что-то здесь не так делаю?

...