एनजी 2-चार्ट

Question

में चार्ट का आकार सेट करने का प्रयास कर रहा हूं, मैं अपने चार्ट का आकार सेट करने की कोशिश कर रहा हूं।

मैंने अपनी टाइपस्क्रिप्ट फ़ाइल में बार चार्ट के ng2-chart उदाहरण की प्रतिलिपि बनाई है और चिपकाया है।

अगर मैं कैनवास के साथ चारों ओर खेलने:

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

कुछ भी नहीं है आकार के साथ हो रहा है। यह हमेशा MAX के लिए strechted है।

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

यह भी अधिकतम करने के लिए बढ़ाया गया है:

अगर मैं कुछ शैली जोड़ें।

ऐसा लगता है कि चार्ट किसी प्रकार के आईफ्रेम में प्रदर्शित किया जा रहा है जो मुझे और अधिक भ्रमित कर रहा है।

मेरे चार्ट के आकार को सेट करने में कोई मदद?

मेरे कोड:

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

विकल्पों में responsive: true और maintainAspectRatio: false की स्थापना करके, यह सीएसएस के साथ कैनवास का आकार बदलने के लिए अनुमति देता है और विकृत या चार्ट में पाठ खिंचाव नहीं है।

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

यदि आप जावास्क्रिप्ट के माध्यम से अपना सीएसएस बदलते हैं, तो आपको चार्ट को पुनर्निर्मित करने की आवश्यकता है।

तरीके यह करने के लिए की एक जोड़े:

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

आपको लगता है कि बनाई गई है आइफ्रेम वस्तु अनदेखा कर सकते हैं। यह किसी भी दृश्य स्थान नहीं लेता है।