我正在使用 highcharts.js 来可视化数据库中的数据系列。有很多数据系列,它们可能会从使用 ajax 收集的数据库中发生变化。我不能保证它们完美无缺,有时它们的日期会有空白,这是一个问题。 Highcharts 只是在整个间隙中画一条线到下一个可用日期,这对我来说很糟糕。
该系列有不同的分辨率。小时、天和周。这意味着可能会丢失几个小时、几天或几周的时间。图表在绘制时一次仅显示 1 个分辨率,如果分辨率发生更改,则会重新绘制。
“实际”问题是如何让 Highcharts 不以有效的方式绘制这些差距,适用于数小时、数天和数周
我知道 highcharts(线型)可以具有这样的行为:如果间隙以空值开头,则它不会在间隙上绘制单条线。
我尝试做的是使用分辨率(记为 0, 1, 2 表示小时、天或周),循环遍历包含值的数组并检测到“这个日期 + 1 !=(这个是什么)日期 + 1 应该是)
我需要解决这个问题的代码就在这里。充满了伪
for (var k in data.values) {
//help start, psudo code.
if(object-after-k != k + resolution){ //The date after "this date" is not as expected
data.values.push(null after k)
}
//help end
HC_datamap.push({ //this is what I use to fill the highchart later, so not important
x: Date.parse(k),
y: data.values[k]
});
}
data.values 中的 k
个对象如下所示
2015-05-19T00:00:00
2015-05-20T00:00:00
2015-05-21T00:00:00
...and more dates
作为字符串。它们的数量可能有数千个,我不希望用户永远等待。所以性能是一个问题,我也不是这方面的专家
请询问清楚。
最佳答案
我写了这个循环。
就我而言,我的数据始终以日期(上午 12 点)为关键,并且以 1 天、1 周或 1 个月的间隔移动。它旨在处理已准备好的点数组 ({x,y})。这就是 dataPoints,它们被映射到 FinalDataPoints,它也获取空值。 FinalDataPoints 是最终用作系列数据的数据。这是使用 momentjs,forwardUnit
是间隔(d、w 或 M)。
它假设数据点已经按从最早的 x 到最前面的 x 排序。
dataPoints.forEach(function (point, index) {
var plotDate = moment(point.x);
finalDataPoints.push(point);
var nextPoint = dataPoints[index+1];
if (!nextPoint) {
return;
}
var nextDate = moment(nextPoint.x);
while (plotDate.add(1, forwardUnit).isBefore(nextDate)) {
finalDataPoints.push({x: plotDate.toDate(), y: null});
}
});
关于javascript - 有效检测数组中缺失的日期并注入(inject) null(highcharts 和 jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30299908/