リンク2種類のハイチャートデータ

Question

2種類のチャートで2つのチャートデータをリンク/シンクして一度にツールチップを表示できますか？

たとえば、私は円グラフとエリアチャートを持っています。

円グラフは特定のブラウザの割合を表し、エリアチャートは各ブラウザの年間ダウンロード数を示します。

誰かがクリックするか、円グラフのセクションに置い該当する行をし、面グラフのツールチップがハイライトされなければならない場合は私は何をする必要がある...

上のFirefoxのように、誰かがクリック/ホバーパイには、その地域に関連する線が表示され、その逆が表示されます。

これはハイチャートで可能ですか？

は、これまでのところ、私が行っている仕事は、私がツールヒントが推移したときの色を表示するために私のエリアチャートにeventを追加したさに気づいhttps://jsfiddle.net/livewirerules/a9tntdam/1/

一つのことです。

events: { 
       tooltipRefresh: function(e) { 
       if (!e.target.hoverSeries) return; 
       $('.highcharts-tooltip>path:last-of-type') 
        .css('fill', e.target.hoverSeries.color); 
       } 
      } 

私がエリアチャート上の線をホールドし、円グラフに移動すると、ツールチップの背景色が変更されます。

Answer 1

パイにカーソルを合わせると、ツールチップに何を表示したいと思いますか分かりません。 1つのポイントがあるので、シリーズ全体のツールチップを別のチャートに表示するのは難しいです。

あなたはシリーズを強調するための関数をコールバック（そう、彼らはホバー上のようになります）のmouseOverとマウスアウトイベントを使用することができます。

point: { 
    events: { 
    mouseOver: function() { 
     var name = this.name; 
     Highcharts.each(chart2.series, function(s) { 
     if (name === s.name) { 
      s.setState('hover'); 
     } 
     }); 
    }, 
    mouseOut: function() { 
     var name = this.name; 
     Highcharts.each(chart2.series, function(s) { 
     if (name === s.name) { 
      s.setState(''); 
     } 
     }); 
    } 
    } 
}, 

あなたが特定のポイントにツールチップをリフレッシュするためtooltip.refresh（ポイント）を使用することができます。

ここで

 mouseOver: function(e) { 
     this.group.toFront(); 
     this.markerGroup.toFront(); 
     var name = this.name; 
     Highcharts.each(chart.series[0].data, function(p) { 
      if (name === p.name) { 
      p.setState('hover'); 
      chart.tooltip.refresh(p) 
      } 
     }); 
     }, 

あなたはそれが動作する方法の例を見ることができます： http://jsfiddle.net/a9tntdam/4/