我有一个 Angular2 应用程序正在尝试渲染 PrimeNG 折线图 ( http://www.primefaces.org/primeng/#/chart/line )。问题是页面没有显示错误或 404,但网格未呈现,并且页面上只有空白区域。
我已经通过npm安装了chartjs和prime包。
我已经包含了 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 作为导入。
当页面加载并检查该区域时,我会看到生成的 Canvas ,该 Canvas 应该保存图表。
有人知道可能出了什么问题吗?
最佳答案
首先,您应该在 angular2 应用程序中安装 char.js:
npm 安装chart.js --save
然后将其导入到您的主模块中,例如“app.module.ts”
导入'chart.js/dist/Chart.min.js';
我和你一样使用相同的 prime 图表组件。
关于Angular2 primeng图表未渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40530641/