Question

我有折线图，h轴是日期，v轴是双。我需要显示两行：

lineA: [
    [2016-1-1 00:00, 1.1]
    [2016-2-1 00:00, 1.1]
    [2016-3-1 00:00, 1.1]
]
lineB: [
    [2016-1-1 00:00, 2.1]
    [2016-2-1 08:00, 2.1]
    [2016-3-1 00:00, 2.1]
]

要在图表上显示数据，我需要组合这两行并将结果传递给arrayToDataTable。

combine: [
    [2016-1-1 00:00, 1.1, 2.1],
    [2016-2-1 00:00, 1.1, null],
    [2016-2-1 08:00, null, 2.1],
    [2016-3-1 00:00, 1.1, 2.1],
]

由于上述原因，我的线路上出现了差距。我该如何解决这个问题？是否可以传递两个单独的集合，每行一个？我发现的所有示例都要求将它们合并为combine表。

当作为line1和line2的一部分提供时，我需要保留空值表

Answer 1

使用以下选项填写null值

创建的空白

interpolateNulls: true

修改

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

＆＃13;
＆＃13;
google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ [new Date(2016, 0, 1), 1.1, 2.1], [new Date(2016, 1, 1), 1.1, null], [new Date(2016, 1, 1, 8), null, 2.1], [new Date(2016, 2, 1), 1.1, 2.1] ], true); var options = { interpolateNulls: true }; var container = document.body.appendChild(document.createElement('div')); var chart = new google.visualization.LineChart(container); chart.draw(data, options); }, packages: ['corechart'] });
＆＃13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [new Date(2016, 0, 1), 1.1, 2.1],
      [new Date(2016, 1, 1), 1.1, null],
      [new Date(2016, 1, 1, 8), null, 2.1],
      [new Date(2016, 2, 1), 1.1, 2.1]
    ], true);

    var options = {
      interpolateNulls: true
    };

    var container = document.body.appendChild(document.createElement('div'));
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

Google可视化折线图 - 多行

2 个答案: