谷歌线图显示的日期范围，即使是‘空’值

Question

我有一些问题，弄清楚如何让我的谷歌线图显示在其数据数组中的给定日期范围，当它都包含一个给定点的空值。

我已经指定了一个月的数据，但是直到12月2日我才得到数据。这导致图表从11月12日到那个日期自动缩放其视图，并截断最后10天。

这是我的数据：

​

​

这是正在显示的图表：

​

​

不过，我可以将空值更改为0，但这将使行在余下的日子中平行线，这并不是最优的。但是，我确实想向用户展示，在过去的10天里没有记录的数据。

任何帮助都将不胜感激。

Answer 1

要填补null值中的空白，

设置选项：

interpolateNulls: true

若要在x轴上设置特定日期范围，

使用选项：

hAxis: {
  viewWindow: {
    min: beginDate,
    max: endDate
  }
}

看下面的工作片段..。

​

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2017, 11, 5), 3],
    [new Date(2017, 11, 6), 4],
    [new Date(2017, 11, 7), 4],
    [new Date(2017, 11, 8), 3],
    [new Date(2017, 11, 9), null],
    [new Date(2017, 11, 10), 4],
    [new Date(2017, 11, 11), null],
    [new Date(2017, 11, 12), 4]
  ]);

  var options = {
    interpolateNulls: true,
    hAxis: {
      viewWindow: {
        max: new Date(2017, 11, 31)
      }
    }
  };

  var chart = new google.visualization.LineChart(
    document.getElementById('chart_div')
  );
  chart.draw(data, options);
});

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

​