ng2-chartsの幅と高さを変更する

Question

ng2-chartsを使用してグラフの幅と高さを設定するにはどうすればよいですか？私は、ng2-chartsサイトのデモと同じように棒グラフを作っています。矩形状のグラフ（折れ線、棒）について

public doughnutChartLabels:string[] = ['EMI', 'Car', 'Food', 'Fuel']; 
data:number[] = [3350, 5450, 4100, 1000]; 
    public doughnutChartType:string = 'doughnut'; 
    options: { responsive: true, } 
    colorsEmptyObject: Array<Color> = [{}]; 
    public datasets: any[] = [ 
    { 
    data: this.data, 
    backgroundColor: [ 
     "#FF6384", 
     "#36A2EB", 
     "#FFCE56" 
    ], 
    hoverBackgroundColor: [ 
     "#FF6384", 
     "#36A2EB", 
     "#FFCE56" 
    ] 
    }]; 
    // events 
    public chartClicked(e:any):void { 
    console.log(e); 
    } 

    public chartHovered(e:any):void { 
    console.log(e); 
    } 

Answer 1

あなたがHTMLでwidthとheightタグを含むことができる。

<canvas baseChart width="2" height="1" 
     [datasets]="chartData" 
     [labels]="chartLabels" 
     [options]="chartOptions" 
     [colors]="chartColors" 
     [legend]=true 
     chartType=line></canvas> 

アスペクト比ではなく、実際の大きさを設定された幅と高さ。

You これは、正方形のグラフ（ドーナツ、レーダー、パイ、極座標）に対して行いますが、意味がありません。正方形の形状を保ちますが、側面または上部と下部に大きなパディングがあります。

<div style="display: block; width: 200px; height: 200px;"> 
    <canvas baseChart 
      [data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [chartType]="doughnutChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas> 
</div> 

：

代わりに、あなたは、チャートを含むdivにしたい正確なサイズを設定することができます