在Google散点图中创建自定义信息窗口

时间:2013-09-07 15:48:10

标签: javascript google-visualization scatter-plot

我有一个谷歌分散,我想当鼠标在圈子上结束然后打开一个包含自定义字符串的信息窗口。

例如在教程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“消失。为什么???

1 个答案:

答案 0 :(得分:1)

我找到了!!! Βelow解决了这个问题。

示例代码:

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