谷歌时间线图表持续时间（以小时为单位）答案

【问题标题】：Google timeline chart duration in hour谷歌时间线图表持续时间（以小时为单位）
【发布时间】：2016-07-29 12:16:03
【问题描述】：

我正在使用 Google 时间线图，即使持续时间超过一天，我也想以小时为单位显示持续时间。有可能吗？

谢谢

一张包含一千个样本的图片，展示了不同的行为1 如您所见，红色的持续时间是错误的，而蓝色的持续时间是计算和打印的。

【问题讨论】：

标签： charts google-visualization timeline

【解决方案1】：

没有configuration options可以改变提示的内容

但可以提供自定义工具提示

请参阅以下工作 sn-p

一个工具提示列被插入并填充了来自数据的信息

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([
      ['165414 fine-turbo          ers', 'Cpus 24 - 0.543h', new Date(2016,07,20, 13,37,32), new Date(2016,07,20, 15,43,19)],
      ['165418 fine-turbo          ers', 'Cpus 24 - 0.534h', new Date(2016,07,20, 14,47,12), new Date(2016,07,20, 16,40,09)],
      ['165427 fine-turbo          ers', 'Cpus 24 - 0.265h', new Date(2016,07,20, 18,01,23), new Date(2016,07,21, 00,02,53)],
    ]);

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

    var dateFormat = new google.visualization.DateFormat({
      pattern: 'M/d/yy hh:mm:ss'
    });

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      var duration = (dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime()) / 1000;
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      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>' +
        '<div class="ggl-tooltip"><span>Duration: </span>' +
        hours + 'h ' + minutes + 'm ' + seconds + 's ';

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

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

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

.ggl-tooltip div {
  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>

【讨论】：

对不起，这个答案没用。只有一个样本很容易，但是当事情变得艰难时，就不是那么容易了。我正在准备一张图片，以用一千个样本来展示我看到持续时间“1 天”，即使持续时间不到一小时。
我在问题中添加了一张图片。
之前不清楚，图片有帮助。如果您想更改工具提示，必须提供您自己的，请参阅上面的更改答案...
嗨@WhiteHat，我刚刚做了与您的解决方案类似的事情，但没有工具提示，现在我可以使用工具提示改进解决方案:) 但我想知道是否为时过早使用谷歌图表。感谢您的解决方案。
@dubis第二个数据表列“条形标签”是添加工具提示时需要的——https://jsfiddle.net/WhiteHat/nyLjc961/1/

【解决方案2】：

这个问题对我帮助太大了，但是如果有人想更改时间轴中的时间格式

 hAxis: {
             format: 'HH:mm'
        },

【讨论】：