高图表 - 鼠标悬停在图形的任何部分上的事件

时间:2014-02-18 20:51:22

标签: javascript charts highcharts

this鼠标悬停事件的文档正好描述了我在High Charts中尝试做的事情 - 当鼠标进入图表时触发事件“。但是,如果你看一下文档中给出的小提琴示例,当你将鼠标悬停在特定点上而不是通常在图表上时,偶数只会触发。这似乎需要在一般图形鼠标上触发事件对于图表库来说是一个相当普遍的用例,但我似乎无法使用任何可用的不同事件来获得此行为。我也不能使用jQuery悬停,因为我需要与鼠标位置对应的相关x标签。有谁知道如何解决这种行为的事件?

对于它的价值,这与高级图表论坛上提出的问题相同here,该问题未得到解答

2 个答案:

答案 0 :(得分:4)

我不确定我完全理解,但我认为您希望能够在地块中的任何位置悬停并确定悬停的x,y坐标?

如果是这样,您可以在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'
    });
});

演示here

答案 1 :(得分:1)

如果我理解您的问题,您可以使用this example来帮助您。它基本上显示了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);
}

您可以为数据点找到我修改过的示例herehere is the api reference。您可能还会发现“select”事件对您的应用程序很有帮助。使用“选择”的Here is another example。除了更改事件功能之外,唯一的区别是添加属性allowPointSelect: true,