0

現在、React JSX Highcharts モジュールを使用して、複数のスプライン シリーズを動的に表示するチャートを作成しています (.map 関数を使用)。

私はこれを書いたレンダリング関数で、DataLines と呼ばれるグローバル var を持っています:

{DataLines.map(Line,index)=>
<SplineSeries key={index} id={Line.id} name={Line.name} data={Line.points}/>}

Datalines が 2 本の線を保持する場合、チャートはそれを正しく表示します。ただし、DataLines から最初の行を削除すると、代わりに 2 番目の行がグラフから削除され (グラフの下部にある行名で示されます)、再レンダリングしてもグラフ自体は実際には変更されません。新しい DataLines を使用します。

さらに、チャートに単一の線があり、代わりに別の単一の線を保持するように DataLines を変更すると、チャートはまったく更新されません。

コンソール ログを使用すると、レンダリング関数に送信されたデータが正しいことがわかります。

何が原因で、どうすれば修正できますか? モジュールの既知の問題ですか?

前もって感謝します！

編集: 私のサーバーは c# でシグナルを処理しているため、それを共有するのはもう少し複雑になりますが、チャートの更新をトリガーするイベントは次のとおりです。

createDataLines(lines){
lines.foreach(l=>{
 lNewLine={
  name:l.name,
  id:l.id,
  points:l.points,
  }
   l.points.foreach(p=>{
     point={
     x:p.time,
     y:p.height,
     }
    lNewLine.points.push(point)
   })
 this.state.DataLines.push(lNewLine);
 });
}
  • 関数は componentDidUpdate から呼び出され、行は親コンポーネントからの設定状態を使用して小道具として受信されます。したがって、基本的に、新しい小道具を受け取ると、新しいデータでグラフを作成します (その後、グラフが適切に更新されないという問題に戻ります)。
4

0 に答える 0