3

这个问题询问谷歌图表，但更笼统。

我图表中图例的鼠标悬停给出了这个错误：

未捕获的类型错误：无法读取 null 的属性“x”

我没有添加任何 'onmouseover' 事件等，它似乎只是对null系列中的外观不满意（当您绘制具有不同 x 值的两个系列时，Google 图表说要添加空点null并绘制interpolateNull : true）。

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

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

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

4

4 回答 4

4

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

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

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

以下在 Firefox 上对我有用：

$('svg > g:first-of-type').bind('mouseover mousemove', function(e) { e.stopPropagation(); });
于 2013-02-18T02:32:35.897 回答
1

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

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

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

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% 的工作。

于 2013-02-13T21:06:27.060 回答
0

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

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

于 2013-02-12T09:46:45.957 回答
0

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

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

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

于 2013-02-17T20:05:35.510 回答