javascript - 谷歌图表 html 工具提示问题

Question

When I select one point at chart, tooltip html content is correct, but when select 2 and more points, tooltips merge in one and html of each one is visible. smbd 知道我做错了什么吗？ smbd 可以帮助我吗？

var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');

  data.addColumn('number' , "id");
  data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});

  var dataArray = [];

  tooltipContent = "<div class='google-chart-tooltip'><center class='google-chart-tooltip-date'>Date: " + date + "</center><br /><p>Value1: " + value1 + ";<br />Value2: " + value2 + ".</p></div>";

  //fill dataArray

  data.addRows(dataArray);
}
var currentChartOptions = {
  tooltip: {
    isHtml: true,
    trigger: 'selection'
  },
  selectionMode: 'multiple',
  interpolateNulls: true,
  hAxis: {
    title: 'Time'
  },
  vAxis: {
      title: "Values"
  }
};

跟随问题的图像:

Answer 1

看起来像一个错误，据我所知，代码看起来不错

没有遗漏的选项或类似的东西

而且很容易复制，如下面的例子

您可以使用 aggregationTarget: 'none' 强制单独显示每个工具提示

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time');
    data.addColumn('number' , 'id');
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    var dataArray = [
      [new Date(2016, 11, 18), 1000, 400],
      [new Date(2016, 11, 19), 1170, 1170],
      [new Date(2016, 11, 20), 660, 1120],
      [new Date(2016, 11, 21), 1030, 540]
    ];

    dataArray.forEach(function (row) {
      data.addRow([
        row[0],
        row[1],
        '<div class="google-chart-tooltip"><center class="google-chart-tooltip-date">Date: ' + row[0] + '</center><br /><p>Value1: ' + row[1] + ';<br />Value2: ' + row[2] + '.</p></div>'
      ]);
    });

    var currentChartOptions = {
      aggregationTarget: 'none',
      tooltip: {
        isHtml: true,
        trigger: 'selection'
      },
      selectionMode: 'multiple',
      interpolateNulls: true,
      hAxis: {
        title: 'Time'
      },
      vAxis: {
        title: 'Values'
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, currentChartOptions);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>