Próba ustawienia rozmiaru wykresów na wykresach ng2

Question

Próbuję ustawić rozmiar moich wykresów.

Mam kopię i wkleiłem przykład wykresu słupkowego ng2 do mojego pliku maszynopisu.

Gdybym bawić z płótna:

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

Nic się nie dzieje z rozmiarem. Zawsze jest skierowany do MAX.

Jeśli dodać kilka stylings:

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

Jest również rozciągnięte na MAX.

Wygląda na to, że wykres jest wyświetlany w jakiejś formie iFrame, co bardziej mnie myli.

Każda pomoc w ustawianiu rozmiaru mojego wykresu?

Mój kod:

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

Ustawiając responsive: true i maintainAspectRatio: false w opcjach, umożliwia zmianę rozmiaru płótna z CSS i nie zakłóca ani rozciągnąć tekst w tabeli.

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

Jeśli zmienisz swoje css za pomocą javascript, musisz wymusić odświeżenie wykresu.

Kilka sposobów, aby to zrobić:

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

Albo

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

Można zignorować obiekt iframe, który jest tworzony. Nie zajmuje żadnej widocznej przestrzeni.