Highcharts - 突出显示范围内的鼠标位置 [英] Highcharts - highlight mouse position within a range

问题描述

当鼠标位于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 $ b $（b）if（event.offsetX> SOME_VALUE）circle.show（）; 
}）; 
  

缺点是我比较event.offsetX而不是event.xAxis [0] .value ie我在比较页面中鼠标的xValue，而不是图表中的xAxis值。

预先致谢

解决方案您可以使用 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-宽度'：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（{
图表：{
 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] 
}，{
数据：[71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4,20] 
}] 
}）; 
  

I need to highlight mouse position when mouse is within a xAxis range of a line chart in HIighCharts. I want to display a circle to highlight the mouse position. But I want this functionality only for the last 25 xAxis values.

Is it possible to do this in Highcharts?

One way is by following code but it has its limitations:

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

The shortcomings are that I am comparing event.offsetX instead of event.xAxis[0].value i.e. I am comparing the xValue of mouse in page rather than xAxis value in chart.

Thanks in advance

解决方案

You can use point.plotX and chart.plotLeft to get position on a chart, see: 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]
  }]
});

这篇关于Highcharts - 突出显示范围内的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！