Primeng 饼图在 Angular2 中抛出错误

Question

我正在尝试使用 primeng beta 9 版本创建饼图。

下面是我的示例代码-

import { Component } from '@angular/core';
import { UIChart, Message } from 'primeng/primeng';

@Component({
    template: `
    <h2> This is Chart.js component </h2>
    <br/><br/>

                <p-chart type="pie" [data]="data" width="300" height="300" 
                        [segmentShowStroke]="false" [animationSteps]="50" animationEasing="easeInOutQuint" [animateScale]="true"></p-chart>

    `,
    directives: [UIChart]
})


export class ChartComponent {
    data: any[];

    constructor() {


        this.data = [{
                        value: 125,
                        color: '#2196F3',
                        highlight: '#64B5F6',
                        label: 'Football'
                    },
                    {
                        value: 50,
                        color: '#673AB7',
                        highlight: '#9575CD',
                        label: 'Pool'
                    },
                    {
                        value: 75,
                        color: '#00897B',
                        highlight: '#26A69A',
                        label: 'Tennis'
                    },
                    {
                        value: 22,
                        color: '#FF9800',
                        highlight: '#FFB74D',
                        label: 'Basketball'
                    },
                    {
                        value: 100,
                        color: '#FF5722',
                        highlight: '#FF8A65',
                        label: 'Cricket'
                    }];
    }                


}

编译时，没有显示任何错误。但浏览器显示错误为 -

ORIGINAL EXCEPTION: TypeError: i.labels is undefined

请让我知道这里有什么问题。

Answer 1

另一种选择是使用这样的数据-

data: any;

   this.data = {
        labels: ['A','B','C'],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]    
        };

看看这是否有帮助。

Primeng 饼图在 Angular2 中抛出错误

Primeng pie chart throws error in Angular2

primeng

angular