Primeng饼图在Angular2中引发错误

时间:2016-07-10 09:44:41

标签: angular primeng

我正在尝试使用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'
                    }];
    }                


}

在编译时,它不会显示任何错误。 但浏览器显示错误为 -

  

原始例外:TypeError:i.labels未定义

enter image description here

请告诉我这里的错误。

1 个答案:

答案 0 :(得分:2)

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

data: any;

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

看看这是否有帮助。