javascript - Highcharts - highlight mouse position within a range - Stack Overflow

admin管理员组

文章数量:1417538

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 shortings are that I am paring event.offsetX instead of event.xAxis[0].value i.e. I am paring the xValue of mouse in page rather than xAxis value in chart.

Thanks in advance

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 shortings are that I am paring event.offsetX instead of event.xAxis[0].value i.e. I am paring the xValue of mouse in page rather than xAxis value in chart.

Thanks in advance

• javascript
• highcharts

Share Improve this question Follow asked Mar 1, 2013 at 7:31 user1517108user1517108 2,41566 gold badges3434 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptHighchartshighlight mouse position within a rangeStack Overflow