【问题标题】:Primeng pie chart throws error in Angular2Primeng饼图在Angular2中抛出错误
【发布时间】:2016-07-10 09:44:40
【问题描述】:

我正在尝试使用 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 未定义

请告诉我这里出了什么问题。

【问题讨论】:

    标签: angular primeng


    【解决方案1】:

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

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

    看看这是否有帮助。

    【讨论】:

    • 当数据不是静态的时候这不起作用,例如,如果我使用一个函数返回一个它不呈现的数字数组
    猜你喜欢
    • 1970-01-01
    • 2018-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-12
    • 2017-11-07
    相关资源
    最近更新 更多