以小时为单位的 Google 时间线图表持续时间 [英] Google timeline chart duration in hour

问题描述

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

i'm using Google timeline chart, and i want to show the duration in hour even if the duration is over a day. Is it possible?

谢谢

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

An image with a thousand of samples that demostrate the different behavior 1 As you can see in red the duration is wrong, and in blue a duration calculated and printed.

推荐答案

没有 配置选项 改变工具提示的内容

there are no configuration options to change the content of the tooltip

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

but a custom tooltip can be provided

查看以下工作片段

插入工具提示列并填充数据中的信息

a tooltip column is inserted and populated with information from the data

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>

这篇关于以小时为单位的 Google 时间线图表持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！