1

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

场景：我有一个下拉列表，我想根据用户选择刷新图表。

我以为在了解了 Angular 更改检测以及如何重新分配对象以使其查看数据已更改（而不是在适当位置更新对象内的数据）之后，我知道了这个问题的答案，但是在阅读了许多其他图表甚至尝试过之后，我了解到这个问题比我最初想象的要困难一些。

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

/**
* (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 上尝试了这种方法，但没有成功。

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

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

4

1 回答 1

1

我想要一个“真正的”解决方案，所以我去了源头。我被告知在 4.0.0-rc.1 之后图表的行为发生了变化。我安装了 4.0.0-rc.1 并按照以下示例使其按预期工作。

   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

于 2017-03-31T05:15:39.653 回答