2016-11-10 4 views
1

У меня есть приложение Angular2, которое пытается отобразить линейную диаграмму PrimeNG (http://www.primefaces.org/primeng/#/chart/line). Проблема в том, что на странице не отображается ошибка или 404, но сетка не отображается, и на странице есть только пустое место.Angular2 primeng chart not rendering

Я установил chartjs и основные пакеты через npm.

Я включил 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' 
      } 
     ] 
    } 

У моего приложения.module есть ChartModule в качестве импорта.

Когда страница загружается и я проверяю область, я вижу сгенерированное холст, который должен удерживать диаграмму.

Есть ли у кого-нибудь идеи, что может быть неправильным?

+0

Это не ответ на вышеуказанную проблему, но мы решили использовать HighCharts вместо этого. http://www.highcharts.com/ –

+0

Я сейчас столкнулся с такой же проблемой, все работает, но она просто дает пустое место, где должна быть диаграмма, могли ли вы исправить это? – Roberto

+0

Вы используете webpack и видите ли какие-либо ошибки в консоли браузера? –

ответ

0

Прежде всего, вы должны установить char.js в вашем angular2 приложения: npm install chart.js --save А затем импортировать, что в вашем O главного модуль, как «app.module.ts» import 'chart.js/dist/Chart.min.js'; Я использую компонент диаграммы же простой как вы.