Trying to set size of charts in ng2-charts

随声附和 提交于 2020-06-24 22:23:09

问题


I am trying to set the size of my charts.

I have copy and pasted the ng2-chart example of the bar chart into my typescript file.

If I play around with the canvas :

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

Nothing seems to happen with the size. It is always strechted to MAX.

If I add some stylings :

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

It is also stretched to MAX.

It seems that the chart is being displayed in some kind of iFrame which is confusing me more.

Any help in how to set the size of my chart?

My 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);
    }
}

回答1:


By setting responsive: true and maintainAspectRatio: false in the options, it allows resizing of the canvas with CSS and does not distort or stretch the text in the chart.

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

If you change your css via javascript, you need to force the chart to repaint.

A couple of ways to do this:

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

Or

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

You can ignore the iframe object that is created. It does not take up any visible space.



来源:https://stackoverflow.com/questions/42833543/trying-to-set-size-of-charts-in-ng2-charts

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!