Google图表会调用onmouseover事件

Question

我整天都在研究这个问题而没有成功.我有一个显示一些数据的谷歌图表,工作正常.

我一直在研究一些更详细的图表,包括大约十几个图表图例项目.我想在图表下面显示我的图例,所以我将它的位置设置为底部.

但是图表产生的"丑陋"分页对我的经理并不是很有吸引力.

所以我隐藏了它并重新渲染了图形下方的图例项目而没有与一些自定义javascripting分页(实际上我从这里看到了代码http://jsfiddle.net/asgallant/6Y8jF/2/)

var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.length; i++) {
        var legendValue = data[i];

        if(legendValue.indexOf("PROVIDER") == -1){

            // create the legend entry
            lis[i] = document.createElement('li');
            lis[i].id = 'legend_' + legendValue;
            lis[i].className = 'legendary';
            lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>';

            // append to the legend list
            legend.appendChild(lis[i]);
        }
    }

所以几乎与实际的图形图例具有相同的功能,但有一件事缺失了.当原始谷歌图表图例悬停时,图表上的项目将突出显示,如下例所示:

http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

如果您将鼠标悬停在德国或美国,则会选择或突出显示图表上的条形图.

如何从列表项中触发相同的行为？

我试过了 :

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
 }

$(document).on("hover", ".legendary", function(){
        eventFire(document.getElementById('graphico'),'select');
        eventFire(document.getElementById('graphico'),'onmouseover');
        $("#graphico").trigger("onmouseover");
        $("#graphico").trigger("select");
        console.log("fired hover event");
    });

我在萤火虫中得到了"发射悬停事件"的消息,但我的图表中没有任何反应.

我将onmouseover监听器添加到图形中(此函数被触发):

google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) {
        console.log("listening bruv");
      });

但我不知道如何选择图表的特定部分.

我正在尝试调用导致主图上突出显示的任何事件:

https://developers.google.com/chart/interactive/docs/gallery/piechart#Events

任何想法或评论都会非常感激.

Answer 1

将属性添加到li元素,您可以在其中标识相关行:

// create the legend entry
lis[i] = document.createElement('li');
lis[i].setAttribute('data-row',i);

绘制图表后,请调用:

   $('#legend li').hover(function(){
      chart.setSelection([{row:$(this).data('row'),column:null}]);
    },function(){
      chart.setSelection(null);
    });

演示:http://jsfiddle.net/doktormolle/2JWQY/