Geek asks and answers

High Charts - mouse event over any part of the chart

The documentation for this> mouse over event describes exactly what I'm trying to do in High Charts - the "when the mouse enters the chart" event fire. However, if you look at the script examples provided in the documentation, it even works only when you hover over a specific point, and not on the graph as a whole. This is similar to the need to trigger events on common graphical mouse manipulators, it would be a fairly common option for a chart library, but I cannot get this behavior using any of the available events. I also can not use jQuery hover because I need an associated x label corresponding to the mouse position. Does anyone know how I can trigger events by this behavior?

For what it's worth, it's identical to the question asked on the high-charts forum here , which remains unanswered

+3
source share
2 answers

I'm not sure I fully understand, but I think you want it to hang anywhere in the plot and determine the x, y coordinate of your hang?

If so, you can do it outside of event handling Highcharts:

$('#container').mousemove(function(e){ //mouseover on container div   
    var chart = Highcharts.charts[0];
    var xaxis = chart.xAxis[0];
    var yaxis = chart.yAxis[0];
    xaxis.removePlotLine('plot-line-x');
    yaxis.removePlotLine('plot-line-y');
    var x = xaxis.toValue(e.offsetX, false); // find X coor where mouse is
    var y = yaxis.toValue(e.offsetY, false); // find y coor where mouse is
    xaxis.addPlotLine({
        value: x,
        color: 'red',
        width: 2,
        id: 'plot-line-x'
    });
    yaxis.addPlotLine({
        value: y,
        color: 'red',
        width: 2,
        id: 'plot-line-y'
    });
});

Demo is here .

+4
source

, , . highcharts, . , , "" highcharts Javascript, , .

...

function doSomething(x)
{
    alert(x);
}

...

mouseOver: function() {
    $reporting.html('x: '+ this.x +', y: '+ this.y);
}

...

mouseOver: function() {
    doSomething(this.x);
    //$reporting.html('x: '+ this.x +', y: '+ this.y);
}

api . "", . , "select". , , allowPointSelect: true,

+1

More articles:


All Articles