angular – 尝试在ng2图表中设置图表的大小

我正在尝试设置图表的大小.

我已将条形图的ng2-chart示例复制并粘贴到我的打字稿文件中.

如果我玩画布：

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

尺寸似乎没有发生.它总是拉伸到MAX.

如果我添加一些样式：

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

它也被拉伸到MAX.

似乎图表正在某种iFrame中显示,这让我更加困惑.

有关如何设置图表大小的任何帮助？

我的代码：

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,77,9,100,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,1)',pointBackgroundColor: 'rgba(148,pointBorderColor: '#fff',pointHoverBackgroundColor: '#fff',pointHoverBorderColor: 'rgba(148,0.8)'
        },{ // dark grey
            backgroundColor: 'rgba(77,83,96,borderColor: 'rgba(77,pointBackgroundColor: 'rgba(77,pointHoverBorderColor: 'rgba(77,1)'
        },{ // grey
            backgroundColor: 'rgba(148,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);
    }
}

通过在选项中设置responsive：true和maintainAspectRatio：false,它允许使用CSS调整画布大小,并且不会扭曲或拉伸图表中的文本.

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

如果您通过javascript更改css,则需要强制重绘图表.

有两种方法可以做到这一点：

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

要么

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

您可以忽略创建的iframe对象.它不占用任何可见空间.