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

我有一个循环，它遍历数据并创建几个谷歌图表。我添加了一个

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;

---

在阅读了google可视化事件处理之后，感谢您

选择事件：

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

因此，尽管可以使用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（）查看该图表中的当前选择。

阅读google visualization event handling后

选择事件：

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

因此，尽管可以使用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（）查看该图表中的当前选择。

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

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;

---

因此，

x

的值被锁定在闭包内，即使以后增加图表索引也是如此。闭包返回一个函数，该函数将成为事件处理程序。此函数调用

selectHandler

，在有人单击图表元素时传入

chart[x]

。如果在循环中对此进行迭代，

x

的值在每个闭包中都是唯一的，这使您能够在

selectHandler

函数中引用特定图表。

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

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;

---

因此，

x

的值被锁定在闭包内，即使以后增加图表索引也是如此。闭包返回一个函数，该函数将成为事件处理程序。此函数调用

selectHandler

，在有人单击图表元素时传入

chart[x]

。如果您在循环中对此进行迭代，

x

的值在每个闭包中都是唯一的，这使您能够在

selectHandler

函数中引用特定的图表。

函数绑定到解救

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

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

如果您针对的是较旧的浏览器，Mozilla crew提供了一个很棒的绑定多边形填充：

---

函数绑定到rescue

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

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

如果您针对的是较旧的浏览器，Mozilla crew提供了一个很棒的绑定多边形填充：

---

我收到消息：Uncaught TypeError:无法读取null的属性'target'，听起来好像没有传递事件对象。您是否能够在selectHandler中使用console.log（e）进行验证？我更改了上面的答案以进行解释。

select

处理程序中没有传递事件对象。您需要知道使用哪个图表才能使用

getSelection（）

。为了知道单击了什么图表，您可以使用上面的模型来侦听将传递事件对象的事件。由于某些原因，事件不会被触发。我甚至在谷歌的交互代码中添加了这些行，但什么都没发生，有什么想法吗？ThanksI收到消息：UncaughtTypeError:无法读取null的属性'target'，听起来好像没有传递事件对象。您是否能够在selectHandler中使用console.log（e）进行验证？我更改了上面的答案以进行解释。

select

处理程序中没有传递事件对象。您需要知道使用哪个图表才能使用

getSelection（）

。为了知道单击了什么图表，您可以使用上面的模型来侦听将传递事件对象的事件。由于某些原因，事件不会被触发。我甚至在谷歌的交互代码中添加了这些行，但什么都没发生，有什么想法吗？谢谢