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] 
    }] 
});