Попытка установить размер диаграмм в ng2-charts

Я пытаюсь установить размер своих диаграмм.

Я скопировал и вставил пример гистограммы 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, 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);
    }
}

angular ng2-charts
person Oliver Watkins    schedule 16.03.2017    source источник
comment
У меня тоже такая проблема. Установка размера холста в CSS не такая уж большая проблема, но шрифты становятся крошечными, когда я делаю холст меньше.   -  person crthompson    schedule 21.03.2017
comment
дайте мне знать, если я неправильно понял вашу проблему. Это исправляет мою, но без скрипки или плунжера я не могу быть уверен, понял ли я.   -  person crthompson    schedule 21.03.2017
comment
Итак, вы хотите изменить размер диаграммы или сделать ее адаптивной для экранов разных размеров? Это проблема со свитком?   -  person Saiyaff Farouk    schedule 22.03.2017

Ответы (1)


arrow_upward
20
arrow_downward

Установив responsive: true и maintainAspectRatio: false в параметрах, он позволяет изменять размер холста с помощью CSS и не искажает и не растягивает текст на диаграмме.

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

Если вы измените свой css через javascript, вам нужно принудительно перерисовать диаграмму.

Есть несколько способов сделать это:

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();

Вы можете игнорировать созданный объект iframe. Он не занимает видимого места.

person crthompson    schedule 21.03.2017