Question

嗨大家根据谷歌图表的文档，行类型可以是：

类型可以是以下之一：'string'，'number'，'boolean'， 'date'，'datetime'和'timeofday'。

https://developers.google.com/chart/interactive/docs/datesandtimes

我需要有时间跨度类型，所以我可以让vAxis的值为0小时，1小时，2小时......最多可达任何数字。这意味着每两个之间是60度像时间跨度，但不是100度数字。

有没有办法实现这个目标？ timeofday也将无法工作，当它达到24小时它变成00:00

Answer 1

使用选项 - ＆gt; hAxis.ticks

结合值的对象表示法 - ＆gt; {v: value, f: formattedValue}

您可能只使用任何类型（'string'除外）

请参阅以下工作代码段以获取基本示例...

构建了hAxis.ticks的自定义集合，每小时一次，在48小时时间内

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Timespan');
  dataTable.addColumn('number', 'Y');

  var oneHour = (1000 * 60 * 60);
  var startDate = new Date();
  var endDate = new Date(startDate.getTime() + (oneHour * 24 * 2));
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneHour) {
    var tickValue = new Date(i);
    var tickFormat = (tickValue.getTime() - startDate.getTime()) / oneHour;
    var tick = {
      v: tickValue,
      f: tickFormat + 'h'
    };
    ticksAxisH.push(tick);
    dataTable.addRow([tick, (2 * tickFormat) - 8]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(dataTable, {
    hAxis: {
      ticks: ticksAxisH
    }
  });
}

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

谷歌图表vAxis时间跨度

1 个答案: