我有一个Angular2应用程序试图渲染PrimeNG折线图(http://www.primefaces.org/primeng/#/chart/line)。问题是该页面没有显示错误或404,但网格没有渲染,页面上只有一个空白区域。
我已经通过npm安装了chartjs和prime包。
我已经包括在内 我的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作为导入。
当页面加载并且我检查区域时,我看到生成的画布应该保存图表。
有没有人有任何想法可能出错?
答案 0 :(得分:2)
首先,您应该在angular2应用中安装char.js:
npm install chart.js --save
然后在你的主模块中导入它,如“app.module.ts”
import 'chart.js/dist/Chart.min.js';
我正在使用与您相同的素数图表组件。
答案 1 :(得分:0)
最初的问题已经存在了几年,但是随着PrimeNG 9.0.5在2020年4月仍然存在挑战。如果按照问题和其他答案中的说明安装了chart.js
,并且正确地导入并包括了所有组件,并且仍然只显示一个空的占位符而不是饼图,则以下过程可能会为您提供帮助:
<p-chart #chart type="pie" [data]="chartData"></p-chart>
@ViewChild('chart') chart: any;
[...]
ngOnInit(): void {
setTimeout(() => {
this.chart.refresh();
}, 100);
}