Question

我有一个循环，通过数据并创建几个谷歌图表。我添加了一个selectHandler，在单击图表栏时会执行某些操作。一旦我有了图表，我就没有问题，但是我不知道如何告诉处理程序点击了哪个图表。

以下是代码：

在循环中的drawChart()内：

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

由于

Answer 1

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

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)

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

Answer 2

阅读谷歌可视化事件处理后......

SELECT事件：

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

因此，尽管您可以使用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']);
}

您需要一个事件处理程序，该事件处理程序在param中传递了事件对象，因此您可以确定哪个图表正在进行事务处理。获得当前图表后，可以使用getSelection（）查看该图表中的当前选择。

Answer 3

功能绑定到救援。

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

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

如果您定位的是旧版浏览器，Mozilla工作人员可以使用以下材料： MDN Function.prototype.bind()

当用户点击栏时，从列表中选择谷歌图表

3 个答案: