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

鼠标悬停事件的文档准确地描述了我在高图中试图做的事情——“当鼠标进入图形时”触发事件。然而，如果您查看文档中给出的提琴示例，偶数仅在您将鼠标悬停在特定点上而不是通常的图形上时才会触发。这似乎需要在通用图形鼠标上触发事件对于图表库来说是一个非常通用的用例，但我似乎无法使用任何可用的不同事件来获得此行为。我也不能使用jQuery hover，因为我需要对应于鼠标位置的相关x标签。有人知道我如何触发有关此行为的事件吗

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

---

值得一提的是，这与high charts论坛上提出的问题完全相同，没有得到回答

如果我正确理解了你的问题，你可以用它来帮助你。它本质上显示了highcharts元素中当前悬停的数据与图表之外的项目交互。我对这个示例做了一点修改，以演示如何将highcharts数据基本上“导出”到一个常规Javascript函数中，然后可以调用其他函数并更改某些全局变量以影响其他元素

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

我添加了以下函数

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

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

并更改了以下代码

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

对此

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

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

---

您可以找到我修改的示例和数据点。您可能还会发现“选择”事件对您的应用程序很有帮助。使用“选择”的。除了更改事件函数之外，唯一的区别是添加属性

allowPointSelect:true，

我不确定我是否完全理解，但我认为您希望能够悬停在绘图中的任何位置，并确定悬停的x，y坐标

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

如果是这样，您可以在事件处理之外执行此操作：

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

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

---

演示。

您希望在输入图形时激发特定的HighCharts元素，还是执行更通用的命令？如果是后者，那么您只需要一个完全独立的javascript函数来响应highcharts对象本身的onmouseover事件。请看那边example@StephenH不幸的是，是的。在悬停时，我正在根据悬停的x值更新其他相关的图形。所以，请澄清，您确实有要与事件对应的x值吗？例如，如果将鼠标悬停在x=3的数据点上，将导致事件发生。如果将鼠标悬停在数据点x=4上，将导致另一个事件？您是否查看了示例？这看起来对你更有帮助。唯一的问题是你必须先将鼠标移到这个系列上。请参阅自定义事件插件

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