Google 设置分钟范围而不是日期的时间轴图表

Question

我希望使用 Google 图表时间轴来显示几分钟而不是日期。我并不是说将比例限制在一天中的几分钟内。我的意思是只显示 0:00 作为开始，然后像 5:00 这样的东西作为结束时间，中间有一定的秒数。

我找到了很多示例（例如，http://almende.github.io/chap-links-library/js/timeline/doc/），但与我正在寻找的完全不同。所有示例都使用 datetime 或 timeofday，但似乎没有将比例限制为任意持续时间。我想要的所有其他功能都在那里（缩放、事件监听器、HTML 注释、JSON 输入等），

是否可以自定义我想要的比例？甚至隐藏它？

顺便说一句——这是一个 Angular (4) 项目，所以我使用 angular2-google-chart 模块从 TypeScript 访问 Google 图表。如果有另一个 Angular 组件更适合，我很想听听。

Answer 1

只需对所有行使用相同的日期 -- 开始/结束日期

只调整日期对象的seconds部分

new Date(year, month, date, hours, minutes, seconds);

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({type: 'string', id: 'Category'});
  dataTable.addColumn({type: 'date', id: 'Start'});
  dataTable.addColumn({type: 'date', id: 'End'});
  dataTable.addRows([
    ['A', new Date(2017, 4, 26, 10, 0, 1), new Date(2017, 4, 26, 10, 0, 2)],
    ['B', new Date(2017, 4, 26, 10, 0, 2), new Date(2017, 4, 26, 10, 0, 3)],
    ['C', new Date(2017, 4, 26, 10, 0, 3), new Date(2017, 4, 26, 10, 0, 4)]
  ]);
  chart.draw(dataTable, {
    hAxis: {
      format: 'mm:ss',
      maxValue: new Date(2017, 4, 26, 10, 0, 5),
      minValue: new Date(2017, 4, 26, 10, 0, 0)
    }
  });
}

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

Google 设置分钟范围而不是日期的时间轴图表

Google Timeline chart for set range of minutes instead of dates

timeline

google-visualization

angular