使用Angular 2时，Chart.js图表​​不会呈现

Question

我试图在一个用typescript编写的Angular2应用程序中使用Chart.js 2.0。首先，我一直试图让文档中显示的基本图表工作（参见http://www.chartjs.org/docs/#getting-started-creating-a-chart），但运气不好。我的图表对象已创建，但从未在浏览器中呈现。

My Component看起来像这样：

import {Component,  Input, AfterViewInit, NgZone} from 'angular2/core';


declare var Chart;

@Component({
    selector: 'chart',
    templateUrl: '/app/components/chart.template.html'
})


export class ChartComponent implements AfterViewInit {

    constructor(private zone: NgZone) { }

    ngAfterViewInit() {
        console.log('In the after function')
        this.zone.runOutsideAngular(() => {
            var ctx = document.getElementById("myChart");
            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
                            }
                        }]
                    }
                }
            });
            console.log(myChart);
        });

    }
}

我的模板非常简单，只有一行设置画布：

<canvas id="myChart" width="400" height="400"></canvas>

我可以从我的日志声明中看到正在创建图表对象并使用正确的数据，它似乎永远不会在浏览器中呈现。当我在Firebug中查看源代码时，我看到了：

<chart>
   <iframe style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;" class="chartjs-hidden-iframe"></iframe>
   <canvas style="width: 0px; height: 0px;" width="0" id="myChart" height="0"></canvas>
</chart>

我尝试添加myChart.render()和myChart.draw()，但似乎没有看到任何差异。

谁能看到我做错了什么？

Answer 1

我不会在这里使用Zones，而是使用类似的东西：

export class ChartComponent implements AfterViewInit {
  @ViewChild('myChart')
  myChart:ElementRef;

  ngAfterViewInit() {
    var myChart = new Chart(this.myChart.nativeElement, {
    (...)
  }
}

在模板中：

<canvas #myChart width="400" height="400"></canvas>

这个问题也可以帮到你：

• Chart is not working in Angular2