javascript - 如何修复谷歌图表中 'timeofday' 值的 y 轴？

Question

目前，我的 y 轴看起来像这样:

这意味着它或多或少只会达到最高值。有没有办法固定它，使其跨越一天的整个持续时间 00:00-23:59？

我假设它必须在选项的 vAxis 部分中设置。

Answer 1

你可以使用 --> vAxis.viewWindow.min 和 max

  viewWindow: {
    min: [0, 0, 0],
    max: [23, 59, 59]
  }

虽然最后一个标签可能不会显示，
图表将扩展到 [23, 59, 59]

你可以添加 --> ticks
保证显示最后一个标签

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('timeofday', 'y');
  data.addRows([
    ['10-19', [8, 0, 0]],
    ['10-20', [10, 0, 0]]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    vAxis: {
      ticks: [
        [0, 0, 0],
        [4, 0, 0],
        [8, 0, 0],
        [12, 0, 0],
        [16, 0, 0],
        [20, 0, 0],
        [23, 59, 59],
      ],
      viewWindow: {
        min: [0, 0, 0],
        max: [23, 59, 59]
      }
    }
  });
});

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