Highcharts - 突出顯示範圍內的鼠標位置

Question

當鼠標位於HIighCharts中折線圖的xAxis範圍內時，需要突出顯示鼠標位置。 我想顯示一個圓來突出顯示鼠標的位置。但是我只想爲最後25個xAxis值使用此功能。

是否可以在Highcharts中做到這一點？

一種方法是通過下面的代碼，但它也有其侷限性：

var circle = chart.renderer.circle(0, 0, 5).attr({ 
    fill: 'blue', 
    stroke: 'black', 
     'stroke-width': 1 
}).add() 
    .toFront() 
    .hide(); 

$(chart.container).mousemove(function (event) { 
     circle.attr({ 
      x: event.offsetX, 
      y: event.offsetY 
     }); 
     if (event.offsetX > SOME_VALUE) circle.show(); 
    }); 

的缺點是，我比較event.offsetX代替event.xAxis [0] .value的就是我比較的x值鼠標放在頁面上而不是圖表中的xAxis值。

在此先感謝

Answer 1

您可以使用point.plotX和chart.plotLeft得到一個圖表上的位置，請參見：http://jsfiddle.net/PNMAG/35/

段：

function addCircle() { 
    var chart = this; 
    var circle = chart.renderer.circle(0, 0, 5).attr({ 
     fill: 'blue', 
     stroke: 'black', 
     'stroke-width': 1 
    }).add() 
    .toFront() 
    .hide(); 

    $(chart.container).mousemove(function(event) { 
    var normalizedEvent = chart.pointer.normalize(event); 

    if (normalizedEvent.chartX > chart.series[0].data[5].plotX + chart.plotLeft) { 
     circle.attr({ 
     x: normalizedEvent.chartX, 
     y: normalizedEvent.chartY 
     }).show(); 
    } else { 
     circle.hide(); 
    } 
    }); 
} 
var chart = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'container', 
    type: 'area', 
    events: { 
     load: addCircle 
    } 
    }, 
    series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
    data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 20] 
    }] 
});