問題タブ [react-highcharts]

プロジェクトにreact-highchartを使用しています。2 つのグラフを表示する: 1) 2 つの系列データを含む折れ線グラフでは、同じグラフに 2 つの線が表示されます。2) 棒グラフまたは縦棒グラフ。

ポイントにカーソルを合わせると、最初のグラフと縦棒グラフの両方の線でツールチップが有効になります。X 軸は日時です。次のように、両方の行でアクティブなポイントにする必要があります。

では、属性react-highchartを使用shared: trueしましたが、両方のラインがアクティブになりません。

また、別のチャートのツールチップもアクティブにする方法はありますか?

編集

提案の後、ハイチャートで同期チャートをチェックしていましたが、コード例はjQueryであり、react-highcharts. それでも、コードを反応するように変換しようとしましたが、これを行いました：

チャート レンダリング コールバックの後:

マウスの移動と syncExtreme を処理します。

ポイントにカーソルを合わせると、エラーが発生します：

しかし、どういうわけか2番目のチャートで機能しました。2番目のチャートポイントにカーソルを合わせると、両方のチャートにツールチップが表示されます。最初のチャートでは機能しません。さらに、最初のグラフには 2 つの系列があります。解決に近づいています。

編集 2: 解決策 2 番目のグラフにカーソルを合わせた場合にのみ、ツールチップが同期される原因となっていることがわかりました。これは、コードを壊していたコンソール エラーが原因でした (内部の For ループhandleMouseMove())。そのエラーを に入れた後try catch、問題は修正されました。

最善の方法ではありませんが、うまくいきます。現在の唯一の問題は、最初のチャートに 2 つのシリーズ ラインがあり (上の画像を確認)、最初の 1 つだけがアクティブな円になり、2 つ目ではありません。

編集 3: 複数のシリーズを強調表示するためのソリューション。

コードを読んだ後、次の行を見つけました。これにより、最初のシリーズのみがポイントを強調表示していました。

この行は最初のシリーズのみを取ります。悪いコード。そのはず：

唯一の問題は、この try catch が取得されずにキャッチされることCan not read property category of undefinedです。