Question

我遇到chart.js和angular2的问题。当我尝试将图表绑定到画布（在角度模板内）时，不会显示任何内容。角度以外一切正常。我的StatisticComponent包含在路由器（路由器插座）中。

成分：

@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作为加载器，我使用browserify。希望有人可以提供帮助。

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

Answer 1

尝试更新模板并将canvas元素包装在div中。不知道它的原因但是当canvas-element位于模板html的根目录时似乎出现问题。

更新了模板：

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

Answer 2

您是否考虑过使用Angular2查看现有的ChartJs改编版本。例如您可以使用的ng2-charts is a great alternative 可以更轻松地合并到angular2应用中。

chart.js没有显示在angular2（rc1）

2 个答案: