Angular2 primeng图表无法渲染

时间:2016-11-10 14:57:52

标签: angular primeng

我有一个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作为导入。

当页面加载并且我检查区域时,我看到生成的画布应该保存图表。

有没有人有任何想法可能出错?

2 个答案:

答案 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,并且正确地导入并包括了所有组件,并且仍然只显示一个空的占位符而不是饼图,则以下过程可能会为您提供帮助:

HTML部分:

<p-chart #chart type="pie" [data]="chartData"></p-chart>

TypeScript部分:

@ViewChild('chart') chart: any;

[...]

ngOnInit(): void {
  setTimeout(() => {
    this.chart.refresh();
  }, 100);
}