Javascript Highcharts-突出显示范围内的鼠标位置

当鼠标位于HIighCharts中折线图的xAxis范围内时，我需要突出显示鼠标位置。 我想显示一个圆圈来突出显示鼠标位置。但我只希望最后25个xAxis值具有此功能

有可能在海图中这样做吗

一种方法是遵循代码，但有其局限性：

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值

---

提前感谢

您可以使用

point.plotX

和

chart.plotLeft

获取图表上的位置，请参阅：

片段：

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

---

你的回答再完美不过了。我不可能自己找到这个答案，因为我没有通过谷歌获得解决方案，也没有浏览api文档。非常感谢！事后诸葛亮。对于s特定的鼠标位置，是否可以在图表上找到x，y坐标值？i、 e.对于特定的偏移量x，找到相应的xAxis值？是的，您可以使用

translate

函数，这不是API的一部分，但可以使用：

chart.x/yAxis[index].translate（）

。函数的参数可以在源代码中找到：

将轴值转换为图表上的像素位置，或者返回

非常感谢您的JSFIDLE示例。这对于突出显示图表的某个区域（使用renderer.rect（））以及不必担心zIndex问题非常有用。鼠标跟踪非常适合我的问题。另一个注意事项是，我有一些分层问题/跨浏览器问题，这些问题通过使用

event=chart.pointer.normalize（event）

解决，这样子/父事件就可以通过“mousemove”事件正确处理