如何从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.正如文档所说:

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