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>

成分</ P>

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元素变形的问题。通常，需要使用canvas元素（或具有样式div设置的元素）包装display: block元素，如下所示：

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

这可以解决您的问题。

图表无法在角度2应用

1 个答案: