图表未在 angular 2 个应用中呈现

Question

我正在使用 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';

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

Answer 1

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

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

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

图表未在 angular 2 个应用中呈现

Chart doesn't render in angular 2 app

chart.js

ng2-charts

angular