Question

此问题询问Google图表，但更为通用。

我的图表中图例的鼠标悬停会出现此错误：

未捕获的TypeError：无法读取null的属性'x'

我没有添加任何'onmouseover'事件等，看起来它只是对系列中null的外观感到不满（当你绘制两个具有不同x值的系列时，谷歌图表说将空点添加为null并使用interpolateNull : true绘图。

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

非常感谢您提出的任何建议。

更新： There is a minimal jsfiddle demonstrating this error here。似乎谷歌图表不喜欢有两个具有完全相同值的x和y点。

Answer 1

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

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

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

以下在Firefox上为我工作：

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

Answer 2

我的答案基于我在此处找到的解决方案：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％的代码。

Answer 3

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

但我认为您的代码包含错误。从基本配置开始尝试调试。

Answer 4

如果某个元素有多个鼠标悬停事件，则必须使用addEventListener添加它们。

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

然后，也许你可以尝试Remove all JavaScript event listeners of an element and its children?

Javascript：从对象中删除所有鼠标悬停事件

4 个答案: