グラフのサイズを設定しようとしています。
棒グラフのng2-chartサンプルをTypeScriptファイルにコピーして貼り付けました。
キャンバスで遊んだ場合:
<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);
}
}
設定することにより 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オブジェクトは無視できます。目に見えるスペースを取りません。