在Highcharts中，使用Angular将绘制的数据单独乘以1000

Question

我尝试绘制的数据的形式如下：

[
    [24894174208.0, 1604842800],
    [24903880704.0, 1604843100]
]

where x = data points; y = UNIX_EPOC_Time

在绘图时，我交换x，y；以便在X-axis上绘制UNIX_EPOC_Time和在Y-axis上绘制数据点

我必须将UNIX_EPOC_Time乘以1000，因为: Javascript内部使用毫秒，而普通的UNIX时间戳通常以秒为单位。( Why do I need to multiply unix timestamps by 1000 in JavaScript? )

此外，我还试图在用点(黄色/橙色/红色)绘制的dataPoints中查找异常情况。

但是，在函数中

js[isIn(anomoly, point){...}]

在dataPoints中发现异常的地方，我看到数据点采用如下形式：

[1604923500000, 22179459072000]

而不是：

[1604923500, 22179459072.0]

因此，我必须将数据点(这里：22179459072000)除以1000，将其转换为其原始形式22179459072.0，以便在图形上绘制它。

然而，我不确定为什么会发生这种情况。

我已经在stackblitz中重现了这个问题。

Answer 1

经过一番调试，我终于找到了问题的根源。

这是由于您克隆数据的方式造成的。

let clone_element = { ...element };

扩展运算符并不是创建元素的深层副本，而是浅层副本，这意味着clone_element的某些部分仍将引用引起突变的数据源。

要解决这个问题，您可以使用例如lodash的cloneDeep()。这个函数会产生一个真正的深度拷贝，所以你不可能改变你的初始数据。

const clone_element = cloneDeep(element);

现场演示：

• https://stackblitz.com/edit/highchart-highstock-pddlto?file=src%2Fapp%2Fapp.component.ts

其他参考资料：

• What is the most efficient way to deep clone an object in JavaScript?

• https://dassur.ma/things/deep-copy/

• https://lodash.com/docs/4.17.15#cloneDeep