ng2-google-charts не показывает правильную подсказку - PullRequest
0 голосов
/ 22 ноября 2018

Я использую 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 (которое в данный момент отображается).Посоветуйте пожалуйста что я делаю не так.Спасибо!

1 Ответ

0 голосов
/ 23 ноября 2018

для временной шкалы, столбец всплывающей подсказки должен находиться в определенной позиции.

каждая строка таблицы данных должна иметь все пять столбцов,
метка строки, метка строки, всплывающая подсказка, начало и конец - в этом порядке .

см. Следующий рабочий фрагмент ...

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>
...