调整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>