Javascript: удаление всех событий наведения курсора мыши из объекта

Этот вопрос задает Google charts, но более общий.

Наведение курсора мыши на легенду в моем графике приводит к следующей ошибке:

Uncaught TypeError: не удается прочитать свойство 'x' из null

Я не добавил никаких событий onmouseover и т. д., похоже, что он просто недоволен появлением null в ряду (когда вы строите два ряда с разными значениями x, Google charts говорит, чтобы добавить пустые точки как null и построить график с interpolateNull : true).

Имеет у кого - нибудь еще была такая проблема? Есть ли способ отключить любые события наведения курсора мыши для легенды диаграммы?

Большое спасибо за любой совет, который вы можете дать.

Обновление: существует минимальный jsfiddle, демонстрирующий эту ошибку здесь . Похоже, Google charts не любит, когда две точки x и y имеют одинаковые значения.

4 2
javascript google-visualization

4 ответа:

Вы можете попытаться остановить соответствующие события мыши от достижения встроенных обработчиков.

Это требует добавления слушателя mouseover к легенде диаграммы. Слушатель вызовет event.stopPropagation() (и, что удивительно, не должен быть вызван во время фазы capture распространения события).

Оказывается, что события также прослушиваются, так что остановите и их.

Для меня в Firefox работало следующее: 

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

Я основываю этот ответ на решении, которое я нашел здесь: 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;
}

Поскольку вы не смогли получить свой код в fiddle, это непроверено,но это должно помочь вам на 99%.

1

Эта документация может быть очень полезной: https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

Однако я думаю, что ваш код содержит ошибки. Попробуйте выполнить отладку, начав с базовой конфигурации.

0

Если элемент имеет более одного события наведения курсора мыши, они должны быть добавлены с помощью addEventListener.

И если вы хотите удалить события, добавленные с помощью addEventListener, вам нужно removeEventListener. Но этот метод нуждается в ссылке на функцию listener (см. https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener).

Тогда, может быть, вы могли бы попробовать удалить все прослушиватели событий JavaScript элемента и его потомков?

0