工具提示在Google散点图中不起作用

沙克

我正在尝试使用Google图表创建散点图,但似乎无法添加列作为工具提示。我阅读了各种资料,指出数据定义应为:

        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Year');        
        data.addColumn('number', 'Sales');
        // A column for custom tooltip content
        data.addColumn({type: 'string',role: 'tooltip',});

       data.addRows([
          ['Name1', 1000, 'Tooltip string'],
          ['Name2', 1170, 'Tooltip string'],
          ['Name3', 660, 'Tooltip string'],
        ]);

但是,它不起作用。

在此处输入图片说明

JSFiddle演示该问题:https ://jsfiddle.net/shakedk/c37L0d1n/

白帽

物料图表
以及其他几个选项不支持列角色

请参阅->物料图特征奇偶校验的跟踪问题

对于自定义工具提示,您将需要使用经典图表。

材料= google.charts.Scatter-包装:'scatter'

经典= google.visualization.ScatterChart-包装:'corechart'

请参阅以下工作片段...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  // A column for custom tooltip content
  data.addColumn({
    type: 'string',
    role: 'tooltip',
  });

  data.addRows([
    ['Name1', 1000, 'Tooltip string'],
    ['Name2', 1170, 'Tooltip string'],
    ['Name3', 660, 'Tooltip string'],
  ]);

  var options = {
    width: 800,
    height: 500,
    chart: {
      title: 'Example',
    },
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="scatterchart_material"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章