Question

在我的angular2 web应用程序中，我必须显示值列表的饼图。此列表在运行时更改。我们可以相应地更改饼图的标签，值和颜色。是否有任何示例可以做到这一点？

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饼图的标签

2 个答案: