Google 可视化折线图 - 多条线

Question

Google 可视化折线图 - 多条线

javascriptchartsgoogle-visualizationlinechart

5

我有一个折线图，横轴是日期，纵轴是双精度浮点数。我需要显示两条线：

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"表。

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

- Giannis

你只需要考虑日期部分。尝试查看https://dev59.com/h3E85IYBdhLWcg3wmEtW - Nizam

时间很重要，我不能放弃它。 - Giannis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

使用以下选项来填补由 null 值创建的空缺。

interpolateNulls: true

编辑

请查看下面的可用代码片段...

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>