Highcharts：自定義渲染器的選項設置

Question

我使用Highcharts繪製一些複雜的數字。

我使用它像：

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

甲簡化的情況是JSFiddle。

現在如何設置圖表的選項？說，我想有默認的'導出'菜單，設置圖表標題等。

同時，我想添加自定義工具提示到每個項目的形狀。像here。如何添加它？

我有點不能 '鉤子' 的Highcharts.Renderer到Highcharts.Chart ...

---

UPDATE：

搜索後，我通過Here連接圖和渲染的對象。但如何添加自定義工具提示矩形（目前我把警報）？

Answer 1

我在API中看不到任何東西，它允許您爲創建的對象「打開」工具提示Renderer。在您提供的鏈接中，他們創建接近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。