javascript - 在 google scatter 中创建自定义信息窗口

Question

我有一个谷歌分散图，我希望当鼠标悬停在圆圈上时，然后打开一个包含自定义字符串的信息窗口。

例如教程 https://developers.google.com/chart/interactive/docs/events#Event_Listeners单击圆圈时，打开一个包含自定义字符串的信息窗口。

谢谢

编辑:

我尝试这段代码:

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('number', 'SVD1');
  dataTable.addColumn('number', 'SVD2');
  dataTable.addColumn('number', 'SVD3');
  // A column for custom tooltip content
  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addRows([
    [2010, 600, null ,'test1'],
    [2011, 1500, null , 'test2'],
    [2012, null, 800, 'test3'],
    [2013, null, 1000, 'test4']
  ]);

  var options = {
    tooltip: {isHtml: true},
    legend: 'none'
  };
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(dataTable, options);
}

使用工具提示，字符串“test 3”和“test4”显示在右侧。字符串“test1”和““test2”消失了。为什么？？？

Answer 1

我找到了!!!下面给出问题的解决方案。

示例代码:

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('number', 'SVD1');
  dataTable.addColumn('number', 'SVD2');
  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addColumn('number', 'SVD3');
  // A column for custom tooltip content
  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addRows([
    [2010,  600, 'test1' ,null, null],
    [2011, 1500, 'test2' ,null, null ],
    [2012, null, null, 800, 'test3'],
    [2013, null, null, 1000, 'test4']
  ]);

  var options = {
    tooltip: {isHtml: true},
    legend: 'none'
  };
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(dataTable, options);
}