angular – 调整ng2图表的宽度和高度

发布时间：2020-12-17 17:22:38 所属栏目：安全来源：网络整理

导读：如何使用ng2-charts设置图表的宽度和高度？我正在制作条形图,就像ng2-charts网站上的演示一样. public doughnutChartLabels:string[] = ['EMI','Car','Food','Fuel'];data:number[] = [3350,5450,4100,1000]; public doughnutChartType:string = 'doughnut';

如何使用ng2-charts设置图表的宽度和高度？我正在制作条形图,就像ng2-charts网站上的演示一样.

public doughnutChartLabels:string[] = ['EMI','Car','Food','Fuel'];
data:number[] = [3350,5450,4100,1000];
  public doughnutChartType:string = 'doughnut';
  options: { responsive: true,}
  colorsEmptyObject: Array<Color> = [{}];
  public datasets: any[] = [
  {
    data: this.data,backgroundColor: [
      "#FF6384","#36A2EB","#FFCE56"
    ],hoverBackgroundColor: [
      "#FF6384","#FFCE56"
    ]
  }];
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

解决方法

对于矩形图形(线条,条形),您可以在html中包含宽度和高度标记：

<canvas baseChart width="2" height="1"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [colors]="chartColors"
        [legend]=true
        chartType=line></canvas>

宽度和高度设置纵横比,而不是实际尺寸.

你可以为方形图形(甜甜圈,雷达,馅饼,极地)做到这一点,但它没有多大意义.它将保持方形,但在侧面或顶部和底部有较大的衬垫.

相反,您可以在包含图表的div上设置所需的确切大小：

<div style="display: block; width: 200px; height: 200px;">
    <canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!