我正在使用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>
这应该可以解决您的问题。