web-dev-qa-db-ja.com

ハイチャート-ポイントでホバーイベントを手動でトリガーします

ハイチャートチャートのポイントにカーソルを合わせると、カーソル（または他の記号）の下に拡大された素敵な円が表示されます。手動でホバー効果をトリガーしたいのですが。

ポイントでmouseOverイベントを手動でトリガーできることは知っていますが、それでは、目的のチャートに拡大されたシンボルが表示されません。

javascripthighcharts
19
Scott At Rain

ソースを見て答えを見つけました-「setState（ 'hover'）;」を呼び出します。ハイライトしたいポイントに。

31
Scott At Rain

重要な情報を追加するだけです。

StockChartの場合、このソリューションは機能しません。

この例 では、これを置き換える必要があります：

chart.tooltip.refresh(chart.series[0].data[i]);

これに：

chart.tooltip.refresh([chart.series[0].points[i]]);

1つの可能な解決策が利用可能です ここ 。

12
JMarques

プログラムでシリーズの最後の有効なポイントを選択（ホバー）する方法の例を次に示します。

  // Find last not-null point in data
  let last = data.indexOf(null) - 1;
  last = (last === -2) ? data.length - 1 : last;
  const lastPoint = this.series[0].points[last];

  // Trigger the hover event 
  lastPoint.setState('hover');
  lastPoint.state = '';  // You need this to fix hover bug
  this.tooltip.refresh(lastPoint); // Show tooltip

完全なJSFiddleの例

enter image description here

3
Do Async

より直接的な答えを出すには（たとえば、その場合、highchartsインスタンスにアクセスできません）：

トリガーする前に、マウスオーバーイベントを作成し、適切なpageXおよびpageY属性を指定する必要があります。

1
brannigan