圖表無法在角度2應用程序中呈現

我正在使用ng2圖表（https://github.com/valor-software/ng2-charts）。我正在嘗試創建餅圖，但是當我加載應用程序時，沒有顯示圖表。我檢查了所有組件，發現任何錯誤但找不到任何錯誤，它也編譯正確。我可能會犯些愚蠢的錯誤，但不知道是什麼。圖表無法在角度2應用程序中呈現

標記

<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';

誰能告訴我什麼，我在這裏失蹤？提前致謝。

來源

2017-08-19 Gerald Keller

從您的標記看來，它可能是一個畫布元素翹曲的問題。一般來說，與div元素（或具有風格display: block集的元素），像這樣包裹canvas元素所需：

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

這應該解決您的問題。

來源

2017-08-19 16:50:51

是的，這是做到了。不知道我是如何錯過的。非常感謝！ –

圖表無法在角度2應用程序中呈現

回答

相關問題