プロジェクトにreact-highchartを使用しています。2 つのグラフを表示する: 1) 2 つの系列データを含む折れ線グラフでは、同じグラフに 2 つの線が表示されます。2) 棒グラフまたは縦棒グラフ。
ポイントにカーソルを合わせると、最初のグラフと縦棒グラフの両方の線でツールチップが有効になります。X 軸は日時です。次のように、両方の行でアクティブなポイントにする必要があります。
では、属性react-highchartを使用shared: trueしましたが、両方のラインがアクティブになりません。
tooltip: {
enabled: true,
useHTML: true,
shared: true,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 3,
shape: 'rectangle'
}
また、別のチャートのツールチップもアクティブにする方法はありますか?
編集
提案の後、ハイチャートで同期チャートをチェックしていましたが、コード例はjQueryであり、react-highcharts. それでも、コードを反応するように変換しようとしましたが、これを行いました：
import ReactHighcharts from 'react-highcharts/ReactHighcharts';
/**
* Override the reset function, we don't need to hide the tooltips and
* crosshairs.
*/
ReactHighcharts.Highcharts.Pointer.prototype.reset = function reset() {
return undefined;
};
ReactHighcharts.Highcharts.Point.prototype.highlight = function highlight(event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the
crosshair
};
チャート レンダリング コールバックの後:
['mousemove', 'touchmove', 'touchstart'].forEach(eventType => {
const container = document.getElementById('tab__charts');
container.removeEventListener(eventType, this.handleMouseMove);
container.addEventListener(eventType, this.handleMouseMove);
});
マウスの移動と syncExtreme を処理します。
handleMouseMove(e) {
for (let i = 0; i < ReactHighcharts.Highcharts.charts.length; i += 1) {
const chart = ReactHighcharts.Highcharts.charts[i];
if (chart) {
// Find coordinates within the chart
const event = chart.pointer.normalize(e);
// Get the hovered point
const point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
}
}
syncExtremes(e) {
const thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
ReactHighcharts.Highcharts.each(ReactHighcharts.Highcharts.charts, (chart) => {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' },
);
}
}
});
}
}
ポイントにカーソルを合わせると、エラーが発生します：
しかし、どういうわけか2番目のチャートで機能しました。2番目のチャートポイントにカーソルを合わせると、両方のチャートにツールチップが表示されます。最初のチャートでは機能しません。さらに、最初のグラフには 2 つの系列があります。解決に近づいています。
編集 2: 解決策
2 番目のグラフにカーソルを合わせた場合にのみ、ツールチップが同期される原因となっていることがわかりました。これは、コードを壊していたコンソール エラーが原因でした (内部の For ループhandleMouseMove())。そのエラーを に入れた後try catch、問題は修正されました。
if (point) {
try {
point.highlight(e);
} catch (err) {
// pass;
}
}
最善の方法ではありませんが、うまくいきます。現在の唯一の問題は、最初のチャートに 2 つのシリーズ ラインがあり (上の画像を確認)、最初の 1 つだけがアクティブな円になり、2 つ目ではありません。
編集 3: 複数のシリーズを強調表示するためのソリューション。
コードを読んだ後、次の行を見つけました。これにより、最初のシリーズのみがポイントを強調表示していました。
point = chart.series[0].searchPoint(event, true)
この行は最初のシリーズのみを取ります。悪いコード。そのはず：
chart.series.forEach(series => {
const point = series.searchPoint(event, true);
if (point) {
try {
point.highlight(e);
} catch (err) {
// pass;
}
}
});
唯一の問題は、この try catch が取得されずにキャッチされることCan not read property category of undefinedです。