Versuchen, die Größe der Diagramme in ng2-Charts zu setzen

Question

Ich versuche, die Größe meiner Diagramme festzulegen.

Ich habe kopiert und eingefügt das ng2-Diagramm Beispiel des Balkendiagramms in meine Typoskript-Datei.

Wenn ich spiele, um mit der Leinwand:

<canvas baseChart width="100" height="100"> 

nichts mit der Größe zu passieren scheint. Es ist immer auf MAX beschränkt.

Wenn ich hinzufügen, einige Stylings:

canvas { 
     width: 50px; 
     height: 50px; 
    } 

Es ist auch MAX gestreckt.

Es scheint, dass das Diagramm in einer Art von iFrame angezeigt wird, die mich mehr verwirrt.

Haben Sie Hilfe beim Festlegen der Größe meines Diagramms?

Mein Code:

import {Component, OnInit} from '@angular/core'; 
@Component({ 
    selector: 'bar-chart-component', 
    template: ` 
<div class="row"> 
    <div class="col-md-6"> 
    <div style="display: block;"> 
    <canvas baseChart width="100" height="100" 
       [datasets]="lineChartData" 
       [labels]="lineChartLabels" 
       [options]="lineChartOptions" 
       [colors]="lineChartColors" 
       [legend]="lineChartLegend" 
       [chartType]="lineChartType" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></canvas> 
    </div> 
    </div> 
    <div class="col-md-6" style="margin-bottom: 10px"> 
    <table class="table table-responsive table-condensed"> 
     <tr> 
     <th *ngFor="let label of lineChartLabels">{{label}}</th> 
     </tr> 
     <tr *ngFor="let d of lineChartData"> 
     <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td> 
     </tr> 
    </table> 
    <button (click)="randomize()">CLICK</button> 
    </div> 
</div> 
    `, 
    styles: [` 
     canvas { 
      width: 50px; 
      height: 50px; 
     } 
`] 
}) 
export class BarChartComponent implements OnInit { 

    ngOnInit(): void { 
    } 

    // lineChart 
    public lineChartData: Array<any> = [ 
     {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, 
     {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}, 
     {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'} 
    ]; 
    public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; 
    public lineChartOptions: any = { 
     responsive: true 
    }; 
    public lineChartColors: Array<any> = [ 
     { // grey 
      backgroundColor: 'rgba(148,159,177,0.2)', 
      borderColor: 'rgba(148,159,177,1)', 
      pointBackgroundColor: 'rgba(148,159,177,1)', 
      pointBorderColor: '#fff', 
      pointHoverBackgroundColor: '#fff', 
      pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
     }, 
     { // dark grey 
      backgroundColor: 'rgba(77,83,96,0.2)', 
      borderColor: 'rgba(77,83,96,1)', 
      pointBackgroundColor: 'rgba(77,83,96,1)', 
      pointBorderColor: '#fff', 
      pointHoverBackgroundColor: '#fff', 
      pointHoverBorderColor: 'rgba(77,83,96,1)' 
     }, 
     { // grey 
      backgroundColor: 'rgba(148,159,177,0.2)', 
      borderColor: 'rgba(148,159,177,1)', 
      pointBackgroundColor: 'rgba(148,159,177,1)', 
      pointBorderColor: '#fff', 
      pointHoverBackgroundColor: '#fff', 
      pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
     } 
    ]; 
    public lineChartLegend: boolean = true; 
    public lineChartType: string = 'line'; 

    public randomize(): void { 
     let _lineChartData: Array<any> = new Array(this.lineChartData.length); 
     for (let i = 0; i < this.lineChartData.length; i++) { 
      _lineChartData[i] = { 
       data: new Array(this.lineChartData[i].data.length), 
       label: this.lineChartData[i].label 
      }; 
      for (let j = 0; j < this.lineChartData[i].data.length; j++) { 
       _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1); 
      } 
     } 
     this.lineChartData = _lineChartData; 
    } 

    // events 
    public chartClicked(e: any): void { 
     console.log(e); 
    } 

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

Answer 1

von responsive: true und maintainAspectRatio: false in den Optionen einstellen, ermöglicht es Ändern der Größe der Leinwand mit CSS und nicht verzerren oder den Text in dem Diagramm strecken.

public lineChartOptions: any = { 
    responsive: true, 
    maintainAspectRatio: false 
}; 

Wenn Sie Ihre CSS über Javascript ändern, müssen Sie das Diagramm neu streichen.

Ein paar Möglichkeiten, dies zu tun:

this.lineChartData = this.lineChartData.slice(); 

Oder

import { Chart } from "chart.js"; 
... 
var ctx = this.chart.ctx; 
var chart = this.chart; 
var myChart = new Chart(ctx, chart); 
myChart.resize(); 

Sie Objekt den iframe ignorieren kann, die erstellt wird. Es nimmt keinen sichtbaren Raum ein.