Highcharts - выделить позицию мыши в диапазоне

Question

Мне нужно выделить положение мыши, когда мышь находится в диапазоне xAxis линейной диаграммы в HIighCharts. Я хочу показать круг, чтобы выделить позицию мыши. Но я хочу эту функциональность только для последних 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 т.е. я сравнивая xValue из мышь на странице, а не значение xAxis в диаграмме.

Заранее спасибо

Answer 1

Вы можете использовать point.plotX и chart.plotLeft, чтобы получить позиции на графике, см: http://jsfiddle.net/PNMAG/35/

Snippet:

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