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/

Google图表会调用onmouseover事件

1 个答案: