ng2-google-charts没有显示正确的工具提示 [英] ng2-google-charts doesn't show the correct tooltip

问题描述

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

I am using ng2-google-charts to create a Timeline chart and I want to display a custom tooltip - it's not too complicated, I just want to display a different value depending on some conditions. This is my code:

组件:

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的值(当前正在显示). 请告知我我在做什么错.谢谢！

The problem is that the tooltip displays the value from the Name column and not the value from the last column which is defined to be used as a tooltip. So into the tooltip I would like to see the value of item.values.organization and not x.values.name (which is currently showing). Please advise what am I doing wrong. Thanks!

推荐答案

对于时间线图，工具提示列需要位于特定位置.

for the timeline chart, the tooltip column needs to be in a certain position.

数据表的每一行都必须具有所有五列，
行标签，条形标签，工具提示，开始和结束-依次 .

every row of your datatable must have all five columns,
row label, bar label, tooltip, start, and end -- in that order.

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

see following working snippet...

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>

这篇关于ng2-google-charts没有显示正确的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！