图表未在 Angular 2 应用程序中呈现答案

【问题标题】：Chart doesn't render in angular 2 app图表未在 Angular 2 应用程序中呈现
【发布时间】：2017-08-20 02:11:53
【问题描述】：

我正在使用 ng2-charts (https://github.com/valor-software/ng2-charts)。我正在尝试创建一个饼图，但是当我加载应用程序时没有显示图表。我检查了所有组件两次是否有任何错误，但找不到任何错误，它也可以正确编译。我可能会犯一些愚蠢的错误，但不知道是什么。

标记

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ChartJS - Pie Chart</title>
  <link href="style.css" ref="stylesheet"></link>
</head>

<body>
    <canvas baseChart
        [data]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [chartType]="chartType">
    </canvas>
</body>

组件

import { Component } from '@angular/core';

@Component({
  selector: 'pie-chart',
  templateUrl: './pie-chart.html'
})
export class PieChartDemoComponent {
  public pieChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
  public pieChartData:number[] = [300, 500, 100];
  public pieChartType:string = 'pie';

有人可以告诉我我在这里缺少什么吗？提前致谢。

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

从您的标记看来，这可能是画布元素变形的问题。通常需要用div 元素（或具有display: block 样式的元素）包装canvas 元素，如下所示：

<div class="chart-container">
    <canvas baseChart
            [data]="chartData"
            [labels]="chartLabels"
            [options]="chartOptions"
            [chartType]="chartType">
    </canvas>
</div>

这应该可以解决您的问题。

【讨论】：

是的，做到了。不知道我怎么想念那个。非常感谢！