angular - 调整 ng2-charts 的宽度和高度

Question

如何使用 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",
      "#36A2EB",
      "#FFCE56"
    ]
  }];
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

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

Answer 1

对于矩形图形(线、条)，您可以在 html 中包含 width 和 height 标签:

<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>