2

我整天都在研究这个问题，但没有成功。我有一个显示一些数据的谷歌图表，工作得很好。

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

但是图表生成的“丑陋”分页对我的经理并没有真正的吸引力。

所以我隐藏了它并重新渲染了图表下方的图例项，没有使用一些自定义 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

任何想法或意见将不胜感激。

4

1 回答 1

5

向 li 元素添加一个属性，您可以在其中识别相关行：

// 创建图例条目
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/

于 2013-01-07T16:29:55.443 回答