2

我有一个循环遍历数据并创建几个谷歌图表。我添加了一个selectHandler在单击图表条时执行某些操作的功能。一旦有了图表，我就可以毫无问题地选择栏，但我不知道如何告诉处理程序单击了哪个图表。

这是代码：

在drawChart()which 里面是一个循环：

chart[chart_index] = new google.visualization.BarChart(document.getElementById('chart_div<%= qcount  %>'));
chart[chart_index].draw(data, {width: 450, height: 300, title: 'title'});

google.visualization.events.addListener(chart[chart_index], 'select', selectHandler);
chart_index = chart_index+1;

selectHandler 的工作方式如下：

function selectHandler(e) {
    var bar_index = chart[HERE_GOES_THE_CHART_INDEX].getSelection()[0].row;
}

谢谢

4

3 回答 3

4

无法从事件处理程序中获取特定图表，因此您必须使用另一种将图表传递给处理程序的方法。这是您可以做到的一种方法：

function selectHandler(myChart) {
    // test to see if anything was selected before you get the index
    // otherwise you will get errors when the selection contains 0 elements
    var selection = myChart.getSelection();
    if (selection.length) {
        var bar_index = selection[0].row;
        // do something with bar_index
        // you should also test bar_index, as the user could have clicked a legend item, which would give a null value for row
    }
}

chart[chart_index] = new google.visualization.BarChart(document.getElementById('chart_div<%= qcount  %>'));
// generally speaking, you should add event handlers before drawing the chart
google.visualization.events.addListener(chart[chart_index], 'select', (function (x) {
    return function () {
        selectHandler(chart[x]);
    }
})(chart_index));
chart[chart_index].draw(data, {width: 450, height: 300, title: 'title'});

chart_index = chart_index+1;

这个闭包传递chart_index到闭包的内部，并将其分配给x：

(function (x) {
    return function () {
        selectHandler(chart[x]);
    }
})(chart_index)

所以值x被锁定在闭包内，即使你稍后增加chart_index。闭包返回一个成为事件处理程序的函数。该函数调用selectHandler，chart[x]当有人点击图表元素时传入。如果您在循环中对其进行迭代，则x每个闭包中的值将是唯一的，从而使您能够引用selectHandler函数中的特定图表。

于 2013-11-23T15:16:56.280 回答
0

看完google可视化事件处理...

选择事件：

select 事件不会将任何属性或对象传递给处理程序（您的函数处理程序不应期望将任何参数传递给它）。

因此，尽管您可以使用 getSelection()，但您需要另一个函数来确定哪个图表已被执行。进入另一个事件处理程序：

// google.visualization.table exposes a 'page' event.
google.visualization.events.addListener(table, 'page', myPageEventHandler);
...
function myPageEventHandler(e) {
  alert('The user is navigating to page ' + e['page']);
}

您需要一个在参数中传递事件对象的事件处理程序，以便您可以确定哪个图表正在被事件。获得当前图表后，您可以使用 getSelection() 查看该图表中的当前选择。

于 2013-11-08T15:07:52.353 回答
0

函数绑定到救援。

google.visualization.events.addListener(chart[chart_index], 'select', selectHandler.bind(chart[chart_index]));

您的处理程序将始终接收图表作为第一个参数。

如果您的目标是较旧的浏览器，这是 Mozilla 团队提供的一个很棒的绑定 polyfill： MDN Function.prototype.bind()

于 2014-03-20T08:16:33.863 回答