在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

根據時間軸圖表的數據格式 ，工具提示應位於第3列。

看下面的工作片段......

 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>