谷歌可视化-Javascript:从一个对象中删除所有鼠标悬停事件

google visualization - Javascript: remove all mouseover events from an object

本文关键字：鼠标 悬停 事件 删除 -Javascript 可视化 一个对象 谷歌      更新时间：2023-09-26

这个问题是关于谷歌图表的，但更一般

图表中图例的鼠标悬停出现以下错误：

未捕获的类型错误：无法读取空的属性"x"

我还没有添加任何"onmouseover"事件等，它似乎只是对null在系列中的出现感到不满意（当你绘制两个具有不同x值的系列时，谷歌图表说要添加空点作为null，并使用interpolateNull : true绘制）。

其他人有这个问题吗？有没有办法禁用图表图例的鼠标悬停事件？

非常感谢你能给我的任何建议。

更新：这里有一个最小的jsfiddle演示了这个错误。谷歌图表似乎不喜欢有两个x和y值完全相同的点。

您可以尝试阻止适当的鼠标事件到达内置处理程序。

这需要在图表的图例中添加一个mouseover侦听器。侦听器将调用event.stopPropagation()（令人惊讶的是，在事件传播的capture阶段不需要触发）。

事实证明mousemove事件也被监听，所以也停止它们。

以下内容在Firefox上对我有效：

$('svg > g:first-of-type').bind('mouseover mousemove', function(e) { e.stopPropagation(); });

我的答案基于我在这里找到的一个解决方案：http://jsfiddle.net/asgallant/6Y8jF/2/

要点是隐藏谷歌的传奇，建立自己的传奇。首先，通过将legend: {position: 'none'}作为选项之一传递给chart.draw来禁用内置图例。

在为图表创建占位符div的addDiv函数中，添加第二个元素来保存图例。

function addDiv(parent_id, div_id) {
    $("#" + parent_id).append('<div id="' + div_id + '" class="chart-chart"></div><ul id="legend_' + div_id + '" class="chart-legend"></ul>');
}

然后，在drawChart函数中，构建图例：

function drawChart(chart, original_table, 
    x_attr, y_attr, x_axis_lbl, y_axis_lbl, x_min_max,
    div_id) { //pass div_id to this function to be able to get legend element
    var google_table = allSeriesToGoogleTable(original_table, 
        x_attr, y_attr, ranking_titles);
    var colors = ["#3366cc","#dc3912","#ff9900"]; //use whatever colors you like
    var options = {'chartArea':{width:"60%"}, 
        vAxis: {'title': y_axis_lbl}, 'hAxis': {'title': x_axis_lbl},
        'interpolateNulls':true,
        colors: colors, //use the same colors for the chart and the legend
        legend: {position: 'none'} //hide default legend
    };
    var legend = $('#legend_' + div_id);
    for (var i = 1; i < ranking_titles.length; i++) {
        var li = $('<li></li>'),
            marker = $('<div class="legendMarker"></div>'),
            explanation = $('<span></span>');
        explanation.text(ranking_titles[i]); // legend marker text
        marker.css( {backgroundColor: colors[i-1]} ); //marker color
        li.append(marker).append(explanation);
        legend.append(li); 
    }
    if ( ! x_min_max === undefined )
    //do something
    chart.draw( google_table, options );
    // add the data table to the chart
    chart.google_table = google_table;
}

当然，确保你也包括小提琴中的CSS：

.chart-chart {
    float: left;
}
.chart-legend {
    margin: 30px 0 0 0;
    float: left;
    list-style: none;
}
div.legendMarker {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin: 0 5px 0 0;
}

既然你不能把你的代码放在小提琴里，这是未经测试的，但它应该能让你达到99%的效果。

此文档可能非常有用：https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

然而，我认为您的代码包含错误。尝试从基本配置开始进行调试。

如果一个元素有多个mouseover事件，则它们必须是使用addEventListener添加的。

如果要删除使用addEventListener添加的事件，则需要removeEventListener。但是此方法需要对侦听器函数的引用（请参见https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener)。

然后，也许您可以尝试删除元素及其子元素的所有JavaScript事件侦听器？

相关文章：