Wykresy chart.js v2 nie wyświetlają się wewnątrz kątowej 2 (ale wykres.js v1 działa idealnie)

Question

Renderuję wykres wewnątrz dyrektywy atrybutów kątowych2 (podejście przyjęte przez zespół kątowy2). To podejście działa z chart.js ale nie chart.js 2.x

kod do dyrektywy atrybutu jest ...

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); 
    } 
} 

stylizacji jest ...

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

komponent używając tego ...

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

w szablonie.

wszystko jest zgodne z oczekiwaniami. Instrukcje console.log ujawniają, że ctx i this.myChart są zdefiniowane wewnątrz haka cyklu życia ngAfterViewInit. Nie ma błędów. Wykres po prostu się nie wyświetla.

PS Chart.js kod v2 działa poprawnie poza Angular2 jak na ten JS Fiddle - http://jsfiddle.net/beehe4eg/

Jedyną różnicą pomiędzy JSFiddle i mój kod jest hak do DOM ...

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

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

docs do dyrektywy, a zwłaszcza dla atrybutu DOM jest haczyk ... https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft

hak element.nativeElement działa dobrze dla chart.js V1 z angular2 (używając identycznego podejścia).

UWAGA że github repo ... https://github.com/valor-software/ng2-charts korzysta chart.js v1 więc to nie pomoże

nadzieję, że ktoś tam może wiedzieć rozwiązanie lub można go naprawić! Z góry dziękuję.

Answer 1

Dzisiejsza aktualna wersja to 2.1.0. Interfejs API zawiera zmiany. Wersja 2,0-alfa został wydany 5 cze 2015 https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha wersja, że ​​używany jest w jsfiddle 2.0.0 a4 (22 czerwca 2015, hash 9368c6079d989527dcd2072b6f18780b53e3113c)

Musisz zmienić swój kod, jak to opisano poniżej:

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

Zobacz przykład pracy z wykresu v2.0 alfa https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p=preview

Jeśli używasz składni 2.1.3 następnie można napisać tak:

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

Przykład z v2.1.3 https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview

Answer 2

elementu nadrzędnego płótno musi być ważny element HTML, nie może być składnikiem znacznika Angular2 jak my-app.

To nie działa podczas korzystania z wykresu.JS:

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

to działa:

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

Nie wiem, czy to jest twój problem chociaż.