Диаграммы Chart.js v2 не отображаются внутри угловых 2 (но Chart.js v1 работает отлично)

Я отображаю диаграмму в директиве атрибута angular2 (подход, принятый командой angular2). Этот подход работает с chart.js, но не с chart.js 2.x

Код для директивы атрибута...

import {Directive, ElementRef, Input} from '@angular/core';

declare var Chart:any;

@Directive({
  selector: '[bargraph]'
})

export class BarGraphDirective {

  el:any;
  myChart:any;

  constructor(element:ElementRef) {
    this.el = element.nativeElement;
  }

  ngAfterViewInit() {
    var canvas = this.el;
    var ctx = canvas.getContext('2d');

    var _data = {
      labels: ["01-01",
        "01-04",
        "01-15",
        "02-03",
        "03-25",
        "04-03",
        "04-14",
        "05-27",
        "05-27",
        "08-03"],
      datasets: [{
        data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
        label: "female",
        borderColor: "rgba(197,23,1,0.8)",
        backgroundColor: "rgba(197,23,1,0.4)",
        hoverBackgroundColor: "rgba(197,23,1,1)",
        borderWidth: 1,
        pointBorderColor: "rgba(197,23,1,1)",
        pointBackgroundColor: "rgba(255,255,255,0.8)",
        pointBorderWidth: 1.5,
        tension: -1,
        yAxisID: "y-axis-1",
      }, ],
    };

    var _options = {
      scales: {
        xAxes: [{
          categorySpacing: 0
        }],
        yAxes: [{
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
        }]
      }
    };

    this.myChart = new Chart(ctx, {
      type: "line",
      data: _data,
      options: _options
    });

    console.log(ctx);
    console.log(this.myChart);
  }
}

стиль это...

canvas[bargraph] {
  height: 400px !important;
  width: 700px !important;
}

компонент, использующий это, имеет...

<canvas bargraph width="700" height="400"></canvas>

в шаблоне.

все как и ожидалось. Операторы console.log показывают, что ctx и this.myChart определены в хуке жизненного цикла ngAfterViewInit. Там нет ошибок. График просто не отображается.

PS Код Chart.js v2 отлично работает за пределами Angular2, как показано на этой скрипте JS - http://jsfiddle.net/beehe4eg/

Единственная разница между JS Fiddle и моим кодом заключается в подключении к DOM ...

document.getElementById("barChart") // for the fiddle

element.nativeElement // in my code as per the approach in the angular 2 docs

Документы для директивы атрибутов и особенно для ловушки DOM ... https://angular.io/docs/ts/latest/guide/attribute-directives.html

Хук element.nativeElement отлично работает для chart.js v1 с angular2 (используя идентичный подход).

Обратите внимание, что github repo... https://github.com/valor-software/ng2-charts использует chart.js v1, так что это не поможет

Надеясь, что кто-то там может знать решение или может это исправить! Заранее спасибо.

Источник

2 ответа

Решение

Сегодня текущая версия 2.1.0. API имеет изменения. Версия 2.0-alpha была выпущена 5 июня 2015 года. https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha Версия, которую вы используете в jsfiddle: 2.0.0-alpha4 (22 июня 2015 г. hash 9368c6079d989527dcd2072b6f18780b53e3113c)

Вы должны изменить свой код, как описано ниже:

this.myChart = new Chart(ctx).Line({
  data: _data,
  options: _options
});

См. Рабочий пример с диаграммой v2.0-alpha https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p=preview

Если вы используете синтаксис 2.1.3, вы можете написать так:

this.myChart = new Chart(ctx, {
  type: 'line',
  data: _data,
  options: _options
});

Пример с v2.1.3 https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview

Источник

Родитель элемента canvas ДОЛЖЕН быть допустимым элементом HTML, он не может быть тегом компонента Angular2, например my-app,

Так что это не работает при использовании Chart.js:

<my-chart-component>
  <canvas></canvas>
</my-chart-component>

Это работает:

<div>
  <canvas></canvas>
</div>

Не уверен, что это твоя проблема.

Источник
Другие вопросы по тегам