Angular2primeng图表不呈现答案

【问题标题】：Angular2 primeng chart not renderingAngular2primeng图表不呈现
【发布时间】：2016-11-10 14:57:52
【问题描述】：

我有一个 Angular2 应用程序正在尝试呈现 PrimeNG 折线图 (http://www.primefaces.org/primeng/#/chart/line)。问题是页面没有显示错误或 404，但网格没有呈现，页面上只有一个空白区域。

我已经通过 npm 安装了 chartjs 和主要包。

我已经包含 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js 在我的 index.html 中

我的组件 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 作为导入。

当页面加载并检查区域时，我看到生成的画布应该包含图表。

有没有人知道可能出了什么问题？

【问题讨论】：

这不能完全解决上述问题，但我们决定改用 HighCharts。 highcharts.com
我现在正面临同样的问题，一切似乎都正常，但它只是在图表应该存在的地方呈现了一个空白区域，你能解决它吗？
你在使用 webpack 并且在浏览器控制台中看到任何错误吗？
我解决了，基本上图表数据是动态的并且在图表呈现时还没有准备好所以我将图表初始化为所有数据设置为0，然后在准备好后更新数据，最后在图表上调用 refresh()。
我在这里遇到了与 angular 6 和 primeng 图表相同的问题。我已经在使用 primeng 库中的其他组件，我喜欢它。如前所述，将尝试延迟和刷新。我还仔细检查了 chart.js 的导入并完成了。

标签： angular primeng

【解决方案1】：

首先你应该在你的 angular2 应用中安装 char.js： npm install chart.js --save 然后将其导入您的主模块中，例如“app.module.ts” import 'chart.js/dist/Chart.min.js'; 我和你一样使用同一个素数的图表组件。

【讨论】：

【解决方案2】：

最初的问题已经存在几年了，但挑战仍然存在于 2020 年 4 月的 PrimeNG 9.0.5。如果您已按照问题和其他答案中的说明安装了chart.js，正确导入并包含了所有组件，但仍然只显示一个空占位符而不是饼图，那么以下过程可能会对您有所帮助：

HTML 部分：

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

TypeScript 部分：

@ViewChild('chart') chart: any;

[...]

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

【讨论】：