하이 차트 : 맞춤형 렌더러에 대한 옵션 설정

Question

일부 복잡한 그림을 그리기 위해 하이 차트를 사용하고 있습니다. 단순화 된 경우는 JSFiddle입니다

var renderer = new Highcharts.Renderer(
      $('#container')[0], 400, 400 
     ); 
for (var i = 0; i < data.length; i++) { 
    plotItem(renderer, data[i]); 
} 

:

내가 좋아하는 그것을 사용할 수 있습니다.

이제 차트 옵션을 설정하는 방법은 무엇입니까? 예, '내보내기'메뉴를 기본으로 설정하고 차트 제목을 설정하고 싶습니다.

한편 모든 항목의 모양에 맞춤 툴팁을 추가하고 싶습니다. here과 같은 것입니다. 그것을 추가하는 방법?

은 어떻게 든 '후크'는 Highcharts.Renderer

---

... Highcharts.Chart에 업데이트 할 수 없습니다 :

검색 후, 나는 Here하여 차트 및 렌더러 객체를 연결합니다. 그러나 사각형에 사용자 정의 된 툴팁을 추가하는 방법 (현재주의를 기울입니다)?

Answer 1

Renderer 만든 개체에 대한 툴팁을 "켤"수있는 API가 표시되지 않습니다. 제공 한 링크에서 그들은 Renderer 객체에 가까운 점을 만들고 객체의 mouseover은 그 점을 통과합니다.

당신은합니다 (Renderer 개체에 매핑 점)이 패턴을 따를 수는 :

function some(renderer) { 
    renderer.rect(10, 10, 100, 100, 1).attr({ 
     fill: 'red' 
    }).add().on('mouseover', function() { 
       var chart = Highcharts.charts[0]; 
       var point = chart.series[0].points[0]; 
       chart.tooltip.refresh(point); 
     }) 
      .on('mouseout', function() { 
       var chart = Highcharts.charts[0]; 
       chart.tooltip.hide(); 
     }); 
} 

는 바이올린 here를 참조하십시오.

또는 당신은 훨씬 더 직접 툴팁 조작 할 수 있습니다 :

function some(renderer) { 
    renderer.rect(10, 10, 100, 100, 1).attr({ 
     fill: 'red' 
    }).add().on('mousemove', function(e) {  
     Highcharts.charts[0].tooltip.move(e.pageX,e.pageY); // follow the mouse  
    }).on('mouseout', function(e) { 
     Highcharts.charts[0].tooltip.hide(); // off the rect, hide it 
    }).on('mouseover', function(e) { 
     var tooltip = Highcharts.charts[0].tooltip; 
     clearTimeout(tooltip.hideTimer); // if it was in the process of hiding, cancel 
     tooltip.isHidden = false; // mark it as shown 
     tooltip.label.attr({ 
       text: 'Hi Mom!' // add a label 
     }); 
     tooltip.label.attr('opacity', 1).show(); // show it 
    }); 
} 

업데이트 바이올린 here를 참조하십시오.