chart.js не отображается в angular2 (rc1)

У меня проблема с chart.js и угловым2. Ничего не отображается, когда я пытаюсь привязать диаграмму к холсту (внутри углового шаблона). Вне углового все работает отлично. My StatisticComponent включен маршрутизатором (маршрутизатор-розетка).chart.js не отображается в angular2 (rc1)

компонент:

@Component({ 
    selector: 'statistic', 
    templateUrl: 'views/statistic.component.html' 
}) 
class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvasElement; 

    ngAfterViewInit() { 
     var ctx = document.getElementById('canvas'); 
     //var ctx = this.canvasElement.nativeElement; 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 

    } 
}

шаблона:

<h2>Statistic</h2> 
<canvas #canvas id="canvas"></canvas>

когда я установить таймаут и ссылку на глобальный HTML холст (не внутри шаблона), то все работает.

я нашел одну аналогичную должность: chart does not display in angular2 component

но техника его подводит помогли. Я не использую systemjs как загрузчик, я пользуюсь браузером. Надеюсь, кто-то может помочь.

// UPDATE

// ЭТО РАБОТАЕТ // ДОБАВЛЯТЬ НОВЫЕ ЭЛЕМЕНТ

class ChartComponent implements AfterViewInit { 
    @ViewChild('container') containerElement; 

    ngAfterViewInit() { 
     var canvas = document.createElement('canvas'); 
     this.containerElement.nativeElement.appendChild(canvas); 

     var myChart = new Chart(canvas, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
}

// ЭТО НЕ РАБОТАЕТ - ПОЧЕМУ? // ИСПОЛЬЗОВАНИЕ VIEWCHILD НАПРЯМУЮ

class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvas; 

    ngAfterViewInit() { 
     var myChart = new Chart(this.canvas.nativeElement, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
}

источник

2016-05-23 wot-stefan

Рассматривали ли вы ищете в существующую адаптацию к ChartJs с Angular2. Например, ng2-charts is a great alternative, что вы, возможно, сможете использовать, что упростит включение в ваше приложение angular2.

источник

2016-05-23 14:36:47

Ну я пытался NG2-чарты и я получил ту же проблему там. Может быть, потому, что n2-диаграммы, использующие chart.js. Когда я пытаюсь привязать диаграммы непосредственно к холсту ViewChild, я получаю описанный результат. Но когда я создаю новый элемент canvas (в javascript) и добавляю его в viewchild, все работает. –

Попробуйте обновить свой шаблон и обернуть элемент canvas внутри div. Не знаю причину этого, но проблема, кажется, появляется, когда элемент canvas лежит в основе шаблона html.

Обновленный шаблон:

<h2>Statistic</h2> 
<div> 
    <canvas #canvas id="canvas"></canvas> 
</div>

источник

2016-10-11 15:20:29 Qatsi

chart.js не отображается в angular2 (rc1)

ответ

Смежные вопросы