Đang cố gắng đặt kích thước biểu đồ trong các biểu đồ ng2

Question

Tôi đang cố gắng đặt kích thước biểu đồ của mình.

Tôi đã sao chép và dán ví dụ biểu đồ ng2 của biểu đồ thanh vào tệp bản thảo của tôi.

Nếu tôi chơi xung quanh với vải:

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

Không có gì có thể xảy ra với các kích thước. Nó luôn được strechted đến MAX.

Nếu tôi thêm một số stylings:

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

Nó cũng được kéo dài đến MAX.

Dường như biểu đồ đang được hiển thị trong một số loại iFrame gây nhầm lẫn cho tôi nhiều hơn.

Bất kỳ trợ giúp nào về cách đặt kích thước biểu đồ của tôi?

Mã của tôi:

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

Bằng cách đặt responsive: true và maintainAspectRatio: false trong các tùy chọn, nó cho phép thay đổi kích thước của canvas với CSS và không bóp méo hoặc kéo dãn văn bản trong bảng xếp hạng.

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

Nếu bạn thay đổi css qua javascript, bạn cần buộc biểu đồ phải sơn lại.

Một vài cách để làm điều này:

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

Hoặc

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

Bạn có thể bỏ qua các đối tượng iframe đó được tạo ra. Nó không chiếm bất kỳ không gian hiển thị nào.