我们使用 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(1627545197228+0200)\/\",\
[\"\/Date(1627545897228+0200)\/\",16000],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();
到目前为止一切顺利,我得到了一个图表,但这里显示了不同时间戳的问题。如果系列没有值,则该行被中断。在有 8 个系列,每个系列 80 条记录的情况下,这会导致不显示任何行。
我的问题是:有没有办法将线延续到下一个已知点,即使缺少一个值?