在Google时间轴图表上自订工具提示 [英] Customizing tooltip on Google Timeline Chart

问题描述

我创建了一个Google时间轴图表，以查看我的音乐收听历史记录。看起来像这样：

I created a Google Timeline Chart to see my musical listening history. It looks like this:

我想从工具提示中删除持续时间部分，但找不到任何选项。我尝试添加这些行：

I want to remove duration part from the tooltip, but couldn't find any option for it. I tried adding these lines:

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

和我的 dataTable.addRows（[]）函数看起来像这样：

and a row in my dataTable.addRows([]) function looks like this:

['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和8月25日：1:37 pm - 1:43 pm 就像在图像中，但我想删除持续时间。 / p>

but it still shows the same tooltip as in the image. I actually want to show Kasabian - La Fee Verte and 25 August: 1:37 pm - 1:43 pm just like in the image, but I want to remove duration.

推荐答案

，根据数据格式，工具提示应在第3列中。

according to the data format for a Timeline chart, the tooltip should be in the 3rd column.

请参阅下面的工作片段...

see following, working snippet...

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>

这篇关于在Google时间轴图表上自订工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！