是否可以根据angular2应用程序中的值列表动态更改primeng饼图的标签

Question

在我的 angular2 Web 应用程序中，我必须显示饼图以获取值列表。此列表在运行时更改。我们可以更改饼图的标签、值和颜色吗 accordingly.Is 有任何示例可以做到吗？

Answer 1

PrimeNG 图表基于 ChartJS。

对于饼图，这就是您的设置方式

var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options

});

那么对于你的数据：

data = {
datasets: [{
    data: [value1, value2, value3]
}],

饼图的值应为 number，因为该图表将计算总数并相应地按比例显示图表。

有一个函数 update，您可以在其中操作特定图表（在本例中为 myPieChart）的数据数组，然后调用 myPieChart.update() 动态更新图表。

与 options 相同，定义一些属性，然后将这些属性绑定到 options 作为 labels 等，这样您就可以动态地和以编程方式更改它们。

目前我没有示例，但您可以尝试一下。

Answer 2

我们可以通过获取列表中的值来做到这一点。

this.piedata = {
                    labels: this.bayGroupList,
                    datasets: [{
                                    data: this.bayCountList,
                                    backgroundColor:this.bayColorList,
                                    hoverBackgroundColor:this.bayColorList
                                }]
                    };

是否可以根据angular2应用程序中的值列表动态更改primeng饼图的标签

Is it possible to change the labels of primeng piechart dynamically based on list of values in angular2 application

angular

primeng