0
votes

HighCharts ne se met pas à jour lorsque l'état change dans React

Je travaille sur un programme rapide qui prend les données d'une réaction enzymatique et les trace sous forme de graphique. Je rencontre ce problème où mon composant highcharts ne sera pas mis à jour si je lui transmets des données dans des accessoires. Je peux voir que les données en état changent dans la console mais je ne vois rien sur le graphique.

Le composant Graph:

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

la façon dont je passe dans le props:

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

Le tableau passé:

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;

Des idées? Je vois toujours 1,2,3 dans le graphique, même si la console me dit que l'état a changé

javascript reactjs highcharts react-highcharts

0 commentaires

4 Réponses :

2
votes

Si vous n'appelez pas la méthode this.setState () , React ne déclenchera pas de nouveau rendu avec les nouvelles données.

Essayez de changer la ligne dans votre componentDidMount .

Cela ressemblera à quelque chose comme ceci:

componentDidMount() {
  let _this = this;

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

0 commentaires

0
votes

Dans votre composant HighchartsreACT, vous devez fournir un PROP appelé onetoone code> et le définir sur true code>.

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

0 commentaires

2
votes

La configuration de updateArgs a fonctionné pour moi, ce qui est documenté sur https://github.com/highcharts/ highcharts-react # readme

<HighchartsReact
                    highcharts={Highcharts}
                    options={ALARM_COUNT_CHART}
                    updateArgs={[true]}
                  />

0 commentaires

1
votes

J'ai été confronté à des problèmes similaires dans lesquels j'ai essayé beaucoup des mêmes suggestions d'ajout de oneToOne = {true} et updateArgs = {[true, true, true ]} .

Dans mon application, j'utilise l'API React Context et useReducer pour stocker les options des graphiques. J'ai réussi à obtenir le rendu du graphique en changeant la section de série d'un tableau de séries à un objet de série singulier.

Exemple de votre état

state = {
    title: {
      text: "My chart"
    },
    series: 
      {
        data: [1, 2, 3]
      }
  };

0 commentaires