javascript - 具有多个日期的谷歌图表

Question

我想在单个 Google 图表中显示多个数据集合。每个系列都是 CPM 的集合，并带有日期:

例如:

series A[
  '2016-09-01' => 2.08023,
  '2016-09-04' => 2.01123
];

series B[
  '2016-09-01' => 1.99324,
  '2016-09-02' => 2.00112
]; 

请注意，两个系列中的日期并不相同。我想在一个谷歌图中绘制这两个图。我应该如何格式化数据行(如果可能的话)。

我做了一个JSFiddle我认为这是一种可行的方法，但在数据表中添加空值不起作用，我在第一个系列中得到了两个点，我期望在其中出现一行。如何让谷歌图表绘制线而不是点？

Answer 1

在 fiddle 中，数据设置正确

但是，由于日期不同，存在 null 值 A 系列

需要使用configuration option interpolateNulls: true

来自文档...

interpolateNulls
Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.

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

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'series a');
  data.addColumn('number', 'series b')
  data.addRows([
    [new Date( 1472688000000 ), 2.08023, 1.99324],
    [new Date( 1472774400000 ), null,    2.00112],
    [new Date( 1472947200000 ), 2.01123, null]
  ]);

  var options = {
    interpolateNulls: true
  };

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

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