javascript - 如何从 Google 散点图选择中获取工具提示值

Question

我正在尝试获取 Google 散点图上所选实体的工具提示。我创建我的数据表如下:

data = google.visualization.arrayToDataTable([
    ['Lines changed', 'TTL', 'Tooltip'],
    [25, 12, 'Text for first'],
    [34, 20, 'Text for second']
]);

然后我可以使用

访问所选的

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column)); // this gives me the Y-value for that row and index
});

有谁知道如何从该行和索引而不是 Y 值获取工具提示文本？

编辑

我确实可以使用 arrayToDataTable() 方法通过设置列属性来添加工具提示，例如:

data.setColumnProperty(2, 'role', 'tooltip');

这使得第三列(索引 2)成为工具提示。只是我不能(轻松地)使用上述方法将 HTML 添加到工具提示中。我不得不改用 new google.visualization.DataTable()。

Answer 1

您不能使用 arrayToDataTable 向图表添加工具提示。作为docs说:

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray : A two-dimensional array, where each row represents a row in the data table. If opt_firstRowIsData is false (the default), the first row will be interpreted as header labels. The data types of each column are interpreted automatically from the data given. If a cell has no value, specify a null or empty value as appropriate. You cannot use Date or DateTime values, or JavaScript literal object notation for cell values.

使用 addColumn/addRows 代替:

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'Lines changed');
    dataTable.addColumn('number', 'TTL');

    // column for tooltip content
    dataTable.addColumn({type: 'string', role: 'tooltip'});

    dataTable.addRows([
        [25, 12, 'Text for first'],
        [34, 20, 'Text for second']
    ]);

    // create and draw the visualization.
    var chart = new google.visualization.ScatterChart(document.getElementById('visualization'));
    chart.draw(dataTable);
}
google.setOnLoadCallback(drawVisualization);

以上代码生成如下散点图:

---

更新

完全忘记了问题 :-) 以下是如何在点击事件中提取工具提示(几乎与您的代码类似，只是处理数据表):

google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    // this gives you 'Text for first' / 'Text for second' etc
    console.log(dataTable.getValue(selection[0].row, 2)); 
});