图表无法在角度 2 应用中呈现



我正在使用ng2图表(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';

有人可以告诉我我在这里错过了什么吗?提前谢谢。

从您的标记来看,这可能是画布元素变形的问题。通常需要用div元素(或设置了样式display: block元素(包装canvas元素,如下所示:

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

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

相关内容

  • 没有找到相关文章

最新更新