ハイチャート - 折れ線グラフの特定の部分をハイライトする方法は？

Question

Highchartsでこれを達成できるかどうかは誰にも分かりますか？ ユーザーがマウスオーバーしてグラフを表示すると、特定の長方形の領域が強調表示されることを望みます。

これまで誰かが似たようなことをしてくれましたか？

ありがとうございます。

Answer 1

私はこれを試していないが、しかし、あなたが希望する結果を得るために、このような何かを試すことができます：あなたはマウスオーバー上の任意の形状を描画し、mouseleaveでそれを隠すためにrendererを使用することができます

tooltip: { 
     formatter: function() { 
      //resetting state 
      for(i=0;i<this.series.data.length;i++){ 
       this.series.data[i].setState(); 
      } 
      var index=this.series.data.indexOf(this.point) 
      //setting state on the current,previous,next point 
      this.series.data[index].setState('hover'); 
      this.series.data[index-1].setState('hover'); 
      this.series.data[index+1].setState('hover'); 
      return "your tooltip"; 
     } 
    } 

Answer 2

。レンダリングされたシェイプを配置するには、計算/コーディングが必要ですが、自由度があります。

あなたが投稿した画像から、最もエレガントではなく、より簡単なアプローチを使用することもできますが、結果を得るのは速いです。隠しシリーズを作成し、エリアを定義するポイントを指定し、イベントでそれを表示/非表示にします。

series: [{ 
    data: [5, 10, 15, 10, 5], 
    color: 'rgba(0,0,200, 0.2)', 
    states: { 
    hover: { 
     enabled: false 
    } 
    } 
}, { 
    id: 'h1', 
    data: [ 
    [1, 10], { 
     x: 2, 
     y: 15, 
     marker: { 
     enabled: true, 
     fillColor: 'black', 
     symbol: 'circle' 
     } 
    }, 
    [3, 10] 
    ], 
    marker: { 
    enabled: false 
    }, 
    linkedTo: 's1', 
    visible: false, 
    enableMouseTracking: false 
    }], 

例：http://jsfiddle.net/9L4e328j/