在 google scatter 中创建自定义信息窗口答案

【问题标题】：create a custom info window in google scatter在 google scatter 中创建自定义信息窗口
【发布时间】：2013-09-07 15:48:10
【问题描述】：

我有一个 google scatter，我想当鼠标悬停在圆圈上时，然后打开一个包含自定义字符串的信息窗口。

例如在教程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”消失了。为什么？？？

【问题讨论】：

您要更改工具提示，还是要生成一个完全不同的信息窗口？
我想在信息窗口中出现不同的字符串。
tooltip column role 对你有用吗？
是的，我可以举个例子吗？请图表将分散！谢谢！
我试试工具提示，没问题。但我现在有一个不同的问题。查看编辑。

标签： javascript google-visualization scatter-plot

【解决方案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);
}

【讨论】：