Größe der Breite und Höhe der ng2-Diagramme ändern

Question

Wie stelle ich die Breite und Höhe eines Diagramms mit ng2-charts ein? Ich mache ein Balkendiagramm, genau wie das Demo auf der ng2-charts-Seite.

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

Für rechteckig geformtes Graphen (Linie, bar) kann man einen widthheight und Tag in der HTML umfassen:

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

die Breite und Höhe das Seitenverhältnis gesetzt ist, nicht die tatsächliche Größe.

Sie können tun dies für quadratische Grafiken (Donut, Radar, Kuchen, polar), aber es macht nicht so viel Sinn. Es behält eine quadratische Form, aber mit größeren Polsterungen an den Seiten oder oben und unten.

Stattdessen können Sie die genaue Größe, die Sie auf einem div das Diagramm enthält, wollen ein:

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