Question

我希望使用Google Charts时间轴显示几分钟而不是日期。我的意思并不是将比例限制在一天中的几分钟。我的意思是只显示0:00作为开始，然后显示5:00作为结束时间，其间步长为一定的秒数。

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

是否可以根据需要自定义比例尺？甚至隐藏它？

BTW - 这是针对Angular（4）项目的，所以我使用angular2-google-chart模块从TypeScript访问Google Charts。如果有另一个更适合的Angular组件，我很乐意听到它。

Answer 1

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

仅调整日期对象上的seconds部分

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

请参阅以下工作代码段...

＆＃13;

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)
    }
  });
}

＆＃13;

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

＆＃13;

设置分钟范围而非日期的Google时间线图表

1 个答案: