如何从Google Scatter Charts选项中获取工具提示值

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：一个二维数组，其中每一行代表一行   在数据表中。如果opt_firstRowIsData为false（默认值），则为   第一行将被解释为标题标签。每种数据类型   列从给定的数据自动解释。如果一个细胞   没有值，请根据需要指定null或空值。你不能   使用Date或DateTime值或JavaScript文字对象表示法   细胞价值。

改为使用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);

以上代码生成以下散点图：

---

<强>更新

完全忘记了这个问题:-)以下是你在点击事件中提取工具提示的方式（几乎与你的代码类似，只是代替dataTable）：

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

Answer 2

如果您有多个数据系列，并希望专门访问与所选数据点关联的工具提示字符串，那么您可以添加上面的davidkonrad答案：

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 + 1));
});

这假设每个数据系列都有一个关联的自定义工具提示列。