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

【问题标题】：Tooltip doesn't work in Google Scatter Chart工具提示在 Google 散点图中不起作用
【发布时间】：2022-03-11 19:29:47
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

标签： charts google-visualization tooltip

【解决方案1】：

material 图表不支持列角色，
以及其他几个选项。

见 --> Tracking Issue for Material Chart Feature Parity

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

材料 = google.charts.Scatter -- 封装：'scatter'

经典 = google.visualization.ScatterChart -- 包：'corechart'

请参阅以下工作 sn-p...

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>

【讨论】：

【解决方案2】：

补充白帽的答案：

ScatterChart + Tooltip + Dashboard 过滤列：

我对 ScatterChart 的经验是，如果还有一个字符串列用作 google.visualization.ControlWrapper 的过滤器列，则工具提示也不适用于“arrayToDataTable 方法”。

“arrayToDataTable 方法”仅适用于 2 列数据和第 3 列工具提示。

如果第 3 列包含仪表板过滤器的输入，它也可以很好地工作。

但是有第 3 列和第 4 列，则不能使用“arrayToDataTable 方法”（对于 ScatterCharts）。

如果我使用 DataTable.addRows 方法效果很好：

google.charts.setOnLoadCallback(chart_ecdf);
function chart_ecdf() {
      var data = new google.visualization.DataTable();
        data.addColumn('number','Population');
        data.addColumn('number','Area');
        data.addColumn({
            type: 'string',
            role: 'tooltip',
          })
        data.addColumn('string','Filter');
        data.addRows([
          [1324, 9640821, 'Annotated 1', 'A'],
          [1133, 3287263, 'Annotated 2', 'A'],
          [304, 9629091, 'Annotated 3', 'A'],
          [232, 1904569, 'Annotated 4', 'B'],
          [187, 8514877, 'Annotated 5', 'B']
        ]);
       
      var filter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'filter_ecdf',
        options: {
          filterColumnIndex: 3,
          ui: { caption: 'Kies een type', label: false, allowTyping: false, allowMultiple: false, allowNone: false, sortValues: false } },
        state: {'selectedValues': ['{{ .Params.ecdf_filter_state | safeJS }}']}
      });
      var chart = new google.visualization.ChartWrapper({
        chartType: 'ScatterChart',
        containerId: 'grafiek_ecdf',
        view: {columns: [0,1,2]},
        options: { 
        chartArea: {top:10, left:35, width:'82%', height:'90%'},
        vAxis: {minValue: 0, maxValue: 1, format: 'percent'},
        hAxis: {format: '#.##%' },
        legend: 'none',
        colors: ['#ffa852'] },
      });
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_ecdf'));
      dashboard.bind(filter, chart);
      dashboard.draw(data);
    }

【讨论】：