Angular2 primeng 차트가 렌더링되지 않습니다.

PrimeNG 선형 차트 (http://www.primefaces.org/primeng/#/chart/line)를 렌더링하려고하는 Angular2 응용 프로그램이 있습니다. 문제는 페이지에 오류나 404가 표시되지 않지만 그리드가 렌더링되지 않으며 페이지에 빈 공간이 있다는 것입니다.Angular2 primeng 차트가 렌더링되지 않습니다.

npm을 통해 chartjs 및 주요 패키지를 설치했습니다.

나는 포함했다 나의 index.html을에서 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js

내 구성 요소를 HTML에 포함 된

... 데이터 1은 TS 파일 생성자에서 아래로 설정되어

<p-chart type="line" [data]="data1" width="1000"></p-chart>

...

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 차트가 렌더링되지 않습니다.

답변

관련 문제