首先,这是一个应用程序的stackblitz,它将演示我在这篇文章中提出的问题:https://stackblitz.com/edit/angular-mlqro1?embed=1&file=app/app.component.ts
第一个问题:当您点击按钮Add object to array
时,将创建6个图表。将使用setData()
方法将数据添加到图表中:
chart.series[0].setData(chartData, false);
由于我传递了参数false
,因此不应在图表上绘制数据点。结果是第一个图表为空,而其他5个图表绘制了数据点。这是出乎意料的行为,但我的理论是,数据点在渲染时会自动在图表上绘制。因此,在我对它们调用setData(data, false)
之后渲染了最后5个图表,并且之前渲染了第一个图表。这可以解释一下吗?
第二个问题:创建图表后,更新每个图表的更新方法将每10秒运行一次。该方法将6个随机数从1-100添加到6个数据容器中的每一个 - 每个图表一个。然后,它将为给定图表找到正确的数据容器(分配给chartData
对象),将最后一个值更改为55并在图表上设置数据。
这样做的结果是所有点都会更改除最后一个之外的每个更新,但它只是第一个(和第二个?)图表,其中最后一个点的值实际上是55.当我在console.log时每个图表的数据容器数组,它们的最后一个值是55,但它只显示在第一个图表上。似乎在第一个图表将其最后一个值设置为55之后,其余图表认为它们的最后一个点也是55,因此不会更新它。
希望有人可以帮助我理解这一点。谢谢!
编辑:关于问题2,我发现如果我将setData()
布尔参数设置为false来调用updatePoints
,就像这样:
series.setData(chartData,false, true, false);
然后它可以工作 - 所有图表的最后一个值是55.所以updatePoints
似乎有问题?