如何使Angular 2（或4）PrimeNg图表异步刷新？ [英] How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

问题描述

问题：如何使PrimeNg图表异步刷新？

Problem: How to get PrimeNg Charts to refresh asynchronously?

场景：我有一个下拉菜单，希望根据用户选择刷新图表。

Scenario: I have a dropdown that I want to refresh the chart based on a user selection.

我想我对Angular变化检测以及了解如何更改对象才能看到数据已被更改（如而不是在适当的位置更新对象中的数据），但是在阅读了许多其他图表甚至尝试使用它们之后，我了解到该问题比我最初想象的要困难一些。

I thought I knew the answer to this question after gaining an understanding of Angular change detection and how I would need to reassign an object for it to see the data had been changed (as opposed to updating the data within the object in place), but after reading about many other charts and even trying them, I learned that the problem was a bit more difficult than I initially thought.

当我读到ng2-charts时，它也从Charts.js构建指令，他们使用的解决方案有点混乱，无法解决Angular中的这个问题。以下是他们的示例代码的摘录：

When I read about ng2-charts, which builds directives off of charts.js as well, they use solutions that were a bit cloogy to get around this problem in Angular. Here is an excerpt from their example code:

/**
* (My guess), for Angular to recognize the change in the dataset
* it has to change the dataset variable directly,
* so one way around it, is to clone the data, change it and then
* assign it;
**/

http://valor-software.com/ng2-charts/

即使它们是字符串化的并重新分析数据以制作克隆副本并重新分配数据，这似乎对他们有用，我在PrimeNg上尝试了这种方法，但没有成功。

Even though they stringify and reparse the data to make a clone copy and reassign the data and it seemed to work for them, I tried this approach with PrimeNg with no success.

在其他示例中，它们对图表数据执行.slice（），或直接访问CHART_DIRECTIVES和.update（）图表。他们还等待绘制图表，直到异步加载数据为止，这只是第一次加载，无法解决我想要的行为。
为什么我应该练习测试驱动开发以及应该如何开始？

In other examples, they do a .slice() on the chart data, or access the CHART_DIRECTIVES directly and .update() the chart. They also wait to draw the chart until the data is loaded in asynchronously, which only loads the first time and wouldn't solve my desired behavior. Why should I practice Test Driven Development and how should I start?

我知道我的数据在幕后，我只需要知道如何刷新图表（即想出一种使Angular正确识别我已更改数据的方法）。

I know my data is there behind the scenes, I just need to know how to refresh the chart (i.e. come up with a way for Angular to properly recognize I have changed the data).

推荐答案

我想要一个真实的解决方案，所以我去了源头。我被告知在4.0.0-rc.1之后的
图表的行为已更改。我安装了4.0.0-rc.1，然后按照以下示例进行操作，使其按预期工作。

I wanted a "real" solution, so I went to the source. I was informed that after 4.0.0-rc.1 that the behavior of the charts was changed. I installed 4.0.0-rc.1 and followed the following example and got it to work as intended.

   changeData() {
            this.changedData = {
                labels: ['X','Y','Z'],
                datasets: [
                    {
                        data: [200, 200, 50],
                        backgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ],
                        hoverBackgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ]
                     }]
            }
            this.data = Object.assign({}, this.changedData);

}

> https://github.com/primefaces/primeng/issues/2235

这篇关于如何使Angular 2（或4）PrimeNg图表异步刷新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！