하이 차트 - 선 그래프의 특정 부분을 강조 표시하는 방법?

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/