javascript - 处理谷歌图表表的悬停事件

Question

当鼠标悬停在谷歌图表表中的一行上时，是否可以触发 javascript 方法？

例如，我可以看到有针对条形图执行此操作的示例，但我在桌子上尝试了相同的事件，但没有发生任何事情。

可能吗？

Answer 1

No, the Table visualization does not support mouseover events. You can attach regular javascript event handlers to the table rows, though. Here's an example that uses jQuery to attach a mouseover event handler to the table rows:

google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div tr').mouseover(function (e) {
        // do something
    });
});

Edit:

if you want to get the row/column information from the cells, this is how you do it:

// data is the DataTable
for (var i = 0; i < data.getNumberOfRows(); i++) {
    for (var j = 0; j < data.getNumberOfColumns(); j++) {
        data.setProperty(i, j, 'className', 'row_' + i + ' column_' + j);
    }
}

// create the event handler on the <td>'s
google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div td').mouseover(function (e) {
        var row, column;
        var classNames = this.className;
        var match = classNames.match(/row_(\d)+/i);
        if (match.length > 1) {
            row = match[1];
        }
        match = classNames.match(/column_(\d)+/i);
        if (match.length > 1) {
            column = match[1];
        }

        if (row != null) {
            // then we have moused over a data row
        }
    });
});