我正在尝试使用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未定义
请告诉我这里的错误。
答案 0 :(得分:2)
另一个选择是使用这样的数据 -
data: any;
this.data = {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
看看这是否有帮助。