Настройка всплывающей подсказки на графике временной шкалы Google

Question

Я создал диаграмму временной шкалы Google, чтобы увидеть мою историю прослушивания музыки. Это выглядит следующим образом:

Я хочу, чтобы удалить длительность часть из подсказки, но не мог найти любой вариант для него. Я попытался добавить следующие строки:

dataTable.addColumn({type: 'string', role:'tooltip'}); 

и строка в моей dataTable.addRows([]) функции выглядит следующим образом:

['25 August', 'Kasabian - La Fee Verte', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19), 'tooltip example'], 

, но он по-прежнему показывает ту же подсказку, как на картинке. Я действительно хочу показать Kasabian - La Fee Verte and 25 August: 1:37 pm - 1:43 pm так же, как на картинке, но хочу удалить продолжительность.

Answer 1

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

см следующий, работая сниппет ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Timeline(container); 
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', id: 'RowLabel'}); 
 
    dataTable.addColumn({type: 'string', id: 'BarLabel'}); 
 
    dataTable.addColumn({type: 'date', id: 'Start'}); 
 
    dataTable.addColumn({type: 'date', id: 'End'}); 
 

 
    dataTable.addRows([ 
 
     ['25 August', 'Kasabian - La Fee Verte', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)], 
 
     ['26 August', 'Test Data 1', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)], 
 
     ['27 August', 'Test Data 2', new Date(2016,01,01, 13,37,32), new Date(2016,01,01, 13,43,19)], 
 
    ]); 
 

 
    dataTable.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}}); 
 

 
    var dateFormat = new google.visualization.DateFormat({ 
 
     pattern: 'h:mm a' 
 
    }); 
 

 
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
 
     var tooltip = '<div class="ggl-tooltip"><span>' + 
 
     dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' + 
 
     dataTable.getValue(i, 0) + '</span>: ' + 
 
     dateFormat.formatValue(dataTable.getValue(i, 3)) + ' - ' + 
 
     dateFormat.formatValue(dataTable.getValue(i, 4)) + '</div>'; 
 

 
     dataTable.setValue(i, 2, tooltip); 
 
    } 
 

 
    chart.draw(dataTable, { 
 
     tooltip: { 
 
     isHtml: true 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['timeline'] 
 
});

.ggl-tooltip { 
 
    border: 1px solid #E0E0E0; 
 
    font-family: Arial, Helvetica; 
 
    padding: 6px 6px 6px 6px; 
 
} 
 

 
.ggl-tooltip span { 
 
    font-weight: bold; 
 
}

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