角度2のアプリでグラフがレンダリングされない

ng2-charts（https://github.com/valor-software/ng2-charts）を使用しています。私は円グラフを作成しようとしていますが、私はアプリをロードするときにグラフが示されていません。私は、すべてのコンポーネントを2回チェックしたが、何も見つからなかった。正しくコンパイルされた。私はいくつかの愚かな間違いをしているかもしれませんが、何がわからないのでしょうか。角度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 class="chart-container"> 
    <canvas baseChart 
      [data]="chartData" 
      [labels]="chartLabels" 
      [options]="chartOptions" 
      [chartType]="chartType"> 
    </canvas> 
</div>

これはあなたの問題を解決する必要があります。そうのような一般的には、div要素（またはスタイルdisplay: blockセット持つ要素）をしてcanvas要素をラップするために必要とされます。

出典

2017-08-19 16:50:51

はい、そうでした。どのように私はそれを逃すか分からない。本当にありがとう！ –

角度2のアプリでグラフがレンダリングされない

答えて

関連する問題