調整ng2圖表的寬度和高度

Question

如何使用ng2圖表設置圖表的寬度和高度？我正在製作條形圖，就像在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> 

的寬度和高度設定縱橫比，而不是實際尺寸。

你可以爲正方形圖形（甜甜圈，雷達，派，極性）做這個，但它沒有多少意義。它將保持方形，但在側面或頂部和底部具有較大的填充。

相反，你可以設置你想要在包含圖表一div的確切大小：

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