[英]Angular2 primeng chart not rendering
我有一个 Angular2 应用程序,它试图呈现一个 PrimeNG 折线图( http://www.primefaces.org/primeng/#/chart/line )。 问题是页面没有显示错误或 404,但网格没有呈现,页面上只有一个空白区域。
我已经通过 npm 安装了 chartjs 和主要包。
我在 index.html 中包含了https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js
我的组件 html 包含...
<p-chart type="line" [data]="data1" width="1000"></p-chart>
其中 data1 在 ts 文件构造函数中设置为以下...
this.data1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#4bc0c0'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#565656'
}
]
}
我的 app.module 有 ChartModule 作为导入。
当页面加载并检查区域时,我会看到生成的画布,该画布应该用于保存图表。
有没有人有任何想法可能是错误的?
首先,您应该在 angular2 应用npm install chart.js --save
: npm install chart.js --save
然后将其导入到您的主模块中,例如“app.module.ts” import 'chart.js/dist/Chart.min.js';
我正在使用和你一样的素数图表组件。
最初的问题已经有几年了,但在 2020 年 4 月,PrimeNG 9.0.5 仍然存在挑战。 如果您已按照问题和其他答案中的描述安装了chart.js
,正确导入并包含了所有组件,但仍然只显示一个空的占位符而不是饼图,则以下过程可能会对您有所帮助:
<p-chart #chart type="pie" [data]="chartData"></p-chart>
@ViewChild('chart') chart: any;
[...]
ngOnInit(): void {
setTimeout(() => {
this.chart.refresh();
}, 100);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.