>source

효소 반응에서 데이터를 가져 와서 그래프로 그리는 빠른 프로그램을 만들고 있습니다. 소품으로 데이터를 전달하면 highcharts 구성 요소가 업데이트되지 않는이 문제가 발생합니다. 상태 데이터가 콘솔에서 변경되고 있음을 알 수 있지만 차트에는 아무것도 표시되지 않습니다.

그래프 구성 요소 :

class HighGraph extends Component {
  state = {
    title: {
      text: "My chart"
    },
    series: [
      {
        data: [1, 2, 3]
      }
    ]
  };
  componentDidMount() {
    let _this = this;
    _this.interval = setInterval(function() {
      console.log(_this.state.series[0].data);
      _this.state.series[0].data = _this.props.list;
    }, 2000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state} />
      </div>
    );
  }
}
export default HighGraph;

소품을 전달하는 메신저 :

   <div>
      <HighGraph list={this.state.graphdata} />
    </div>

전달되는 배열 :

[0.003, 0.006, 0, 0, 0.003, 0.006, 0.006, 0, 0.003, 0.006, 0.003, 0.003, 0.006, 0.006, 0.006, 0.006, 0.006, 0.006, 0.003, 0, 0.003, 0.003, 0.006, 0.003, 0.003, 0.003, 0.006, 0.003, 0.01, 0.006, 0, 0.003, 0.003, 0.003, 0.003, 0.003, 0.006, 0.003, 0, 0.006, 0.006]

어떤 아이디어? 콘솔에서 상태가 변경되었다고 알려주더라도 차트에 여전히 1,2,3이 표시됩니다

  • 답변 # 1

    this.setState() 에 전화하지 않으면  메소드를 사용하면 React는 새 데이터로 다시 렌더링하지 않습니다.

    componentDidMount 에서 줄을 바꿔보십시오 .

    다음과 같이 보일 것입니다 :

    componentDidMount() {
      let _this = this;
      _this.interval = setInterval(function() {
        console.log(_this.state.series[0].data);
        _this.setState({ series: [{ data: _this.props.list }] });
      }, 2000);
    }
    
    

  • 답변 # 2

    HighchartsReact 구성 요소에서 oneToOne 라는 소품을 제공해야합니다.  그것을 true 로 설정하십시오. .

    <HighchartsReact highcharts={Highcharts} options={this.state} oneToOne={true} />
    
    

    상태 또는 Prop 데이터를 통해 새 데이터가있을 때 컴포넌트가 다시 렌더링하도록합니다.

    ref : https://api.highcharts.com/class-reference/Highcharts.Chart#update

관련 자료

  • 이전 php - 마 젠토 2 - 필터 대신 레이어 탐색 링크에서 카테고리 만들기
  • 다음 css - 자연스럽게 텍스트가 흐르는 이미지