Google图表调用onmouseover事件 [英] Google charts invoke onmouseover event

问题描述

我整天都在研究这个问题，但没有成功.我有一个显示一些数据的google图表，效果很好.

I've been researching this problem all day long and no success. I have a google chart displaying some data, works just fine.

我一直在研究更详细的图形，包括大约十二个图形图例项.我想在图的下方显示我的图例，因此将其位置设置为底部.

I've been working on somewhat more detailed graph including about dozen graph legend items. I wanted to display my legend below the graph so I set it's position to bottom.

但是，图表产生的丑陋"分页对我的经理并没有真正的吸引力.

But the "ugly" pagination generated by charts is not really appealing to my manager.

因此，我将其隐藏并重新渲染了图形下方的图例项，而无需使用一些自定义javascript进行分页(实际上，我从这里看到了代码

So I've hidden it and re-rendered the legend items below the graph without pagination with some custom javascripting(actually I saw the code from here 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]);
        }
    }

因此几乎具有与实际图形图例相同的功能，但是缺少一件事.鼠标悬停在原始Google图表图例上时，该图上的项目将突出显示，如以下示例所示:

So almost there with the same functionality as the actual graph legend, one thing missing though. When original google chart legend is hovered the item on the graph are highlighted as in this example :

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

如果您将鼠标悬停在德国或美国，则图形上的条形将被选中或突出显示.

If you hover on Germany or USA the bar on the graph will be selected or highlighted.

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

How do I trigger the same behavior from my list items?

我尝试过:

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");
    });

我在萤火虫中收到触发悬停事件"消息，但图形中没有任何反应.

I get "fired hover event" message in the firebug but nothing happens in my graph.

我在图形上添加了onmouseover侦听器(此功能被触发):

I added the onmouseover listener to the graph (this function is fired) :

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

但是我不确定如何选择图形的特定部分.

But I'm not sure how to select particular part of the graph.

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

I'm trying invoke any of these events which cause highlighting on the main graph :

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

任何想法或评论都将不胜感激.

Any ideas or comments would be really appreciated.

推荐答案

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

Add an attribute to the li-elements where you can identify the related row:

// 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/

Demo: http://jsfiddle.net/doktormolle/2JWQY/

这篇关于Google图表调用onmouseover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！