Angular2 primeng chart not rendering

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

我已经通过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作为导入。

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

有没有人有任何想法可能是错的？

来源

2016-11-10 Ben Cameron

这不是完全解决上述问题的答案，而是我们决定改用HighCharts。 http://www.highcharts.com/ –

我现在面对完全相同的问题，一切似乎都奏效，但它只是呈现图表应该是的空白区域，您是否能够修复它？ – Roberto

您是否使用webpack并在浏览器控制台中看到任何错误？ –

首先，你应该在你的angular2应用程式安装char.js： npm install chart.js --save ，然后导入，在你的O像“app.module.ts” import 'chart.js/dist/Chart.min.js'; 我使用的是相同的首要的图表组件像主模块您。

来源

2017-09-03 21:39:09

Angular2 primeng chart not rendering

回答

相关问题