ng2-google-charts 没有显示正确的工具提示答案

【问题标题】：ng2-google-charts doesn't show the correct tooltipng2-google-charts 没有显示正确的工具提示
【发布时间】：2018-11-22 10:34:27
【问题描述】：

我正在使用ng2-google-charts 创建一个时间轴图表，我想显示一个自定义工具提示 - 它并不太复杂，我只是想根据某些条件显示不同的值。这是我的代码：

组件：

chartData:any =  {
    chartType: 'Timeline',
    dataTable: [
        ['Name', 'From', 'To', {role: 'tooltip'}]
    ]
}

this.chartData.dataTable.push([x.values.name, x.values.dateFrom, x.values.dateTo, item.values.organization]);

问题在于工具提示显示来自Name 列的值，而不是定义用作工具提示的最后一列的值。因此，在工具提示中，我想查看item.values.organization 的值，而不是x.values.name（当前正在显示）。请告知我做错了什么。谢谢！

【问题讨论】：

标签： angular charts google-visualization

【解决方案1】：

对于时间线图表，工具提示栏需要位于某个位置。

数据表的每一行都必须包含所有五列，
行标签、条形标签、工具提示、开始和结束 -- 按此顺序。

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

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

function drawChart() {
  var container = document.getElementById('timeline-tooltip');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'President'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'dummy bar label'
  });
  dataTable.addColumn({
    type: 'string',
    role: 'tooltip'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3)],
    ['Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3)],
    ['Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3)]
  ]);

  chart.draw(dataTable);
}

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

【讨论】：