el gráfico no se muestra en el componente angular2

Question

Jan 14, 2016, 09:57 AM

el gráfico no se muestra en el componente angular2

Estoy tratando de usar chart.js para construir gráficos dentro de un componente Angular2. Hasta ahora no he tenido éxito. El gráfico aparentemente está construido pero no se muestra. El elemento de lienzo tiene ancho y alto nulos (<canvas width="0" height="0" style="width: 0px; height: 0px;"></canvas>)

Si trato de hacer lo mismo con una página html simple y un script js, todo funciona.

Aquí está mi código. Gracias de antemano por cualquier ayuda.

index.html

<html>
  <head>
      <base href="/">
    <title>Angular 2 Sandbox - Chart component</title>
    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <script src="./lib/chart.js/chart.min.js"></script>
  </body>
</html>

app.component.ts

import {Component} from 'angular2/core';
import {MyChart} from './myChart.component'
@Component({
  selector: 'my-app',
  template: `
    <h1>Here is the App</h1>
    <div style="width:30%">
        <my-chart></my-chart>
    </div>
  `,
    directives: [MyChart]
})
export class AppComponent{ 
}

myChart.component.ts

import {Component, ViewChild} from 'angular2/core';

declare var Chart: any;

@Component({
  selector: 'my-chart',
  template: `
    <canvas #canvasElement></canvas>
  `,
})

export class MyChart { 
    @ViewChild('canvasElement') canvasElement;

    ngAfterViewInit() {
        let lineChartData = this.initializeData();
        var ctx = this.canvasElement.nativeElement.getContext("2d");
        console.log(ctx);
        var thisChart = new Chart(ctx)["Line"](lineChartData, {
            responsive: true
        });
        console.log(thisChart);
    }

    initializeData() {
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        } 
        return lineChartData;
    }

}