时间戳

首页 > 解决方案 > 当缺少值时，如何使折线图不中断线？

javascript - 当缺少值时，如何使折线图不中断线？

问题描述

我们使用 AnyChart 在折线图中显示能耗数据。这里，获取时间被分配给相应的值。现在，如果要将这些系列中的几个显示在一个图表中，我面临的挑战是系列中的时间戳并不总是一致的，因为数据是以不同的间隔记录的，并且第一个间隔的时间并不总是相同。

因此，出于测试目的，我创建了以下代码来模拟这种情况。一开始有两行数据集，格式与软件提供的相同。我将它们转换为普通的 JavaScript 对象，从而将时间戳的序列化转换为 Date 对象。在下一步中，我使用这些系列创建一个折线图并将 DateTime 设置为比例类型。

function reviveTimestamps(key, value) {
    // Turns the serialized json timestamps into Date objects

    var a;

    if (typeof (value) === 'string') {
        a = /\/Date\((\d*)\+(\d{4})\)\//.exec(value);
        if (a) {
            return new Date(+a[1]);
        }
    }
    return value;
}

let seriesOneJson = "[\
        [\"\/Date(1627544197228+0200)\/\", 10000],\
        [\"\/Date(1627545097228+0200)\/\", 12000],\
        [\"\/Date(1627545997228+0200)\/\", 18000],\
        [\"\/Date(1627546897228+0200)\/\", 11000],\
        [\"\/Date(1627547797228+0200)\/\", 9000]\
    ]";

let seriesTwoJson = "[\
        [\"\/Date(1627544197228+0200)\/\", 8000],\
        [\"\/Date(1627545097228+0200)\/\", 10000],\
        [\"\/Date(1627545197228+0200)\/\", 11000],\
        [\"\/Date(1627545897228+0200)\/\", 16000],\
        [\"\/Date(1627547797228+0200)\/\", 8000]\
    ]";

let seriesOneData = JSON.parse(seriesOneJson, reviveTimestamps);
let seriesTwoData = JSON.parse(seriesTwoJson, reviveTimestamps);

chart = anychart.line();
chart.xScale(anychart.scales.dateTime());

let series1 = chart.line(seriesOneData);
let series2 = chart.line(seriesTwoData)

chart.container("container");
chart.draw();

到目前为止一切顺利，我得到了一张图表，但不同时间戳的问题出现在这里。如果系列没有值，则该行被中断。在有八个系列的情况下，每个系列有 80 条记录，这会导致没有一行被显示。带有间断线的图表的屏幕截图

我的问题是：有没有办法将这些线继续到下一个已知点，即使缺少一个值？

标签： javascriptlinechartanychart

解决方案

对于这两个系列，您应该启用connectMissingPoints()设置。像这样：

let series1 = chart.line(seriesOneData);
series1.connectMissingPoints(true);
let series2 = chart.line(seriesTwoData)
series2.connectMissingPoints(true);

推荐阅读