我尝试在角度上制作饼图，我使用Chartjs，当我尝试运行我的项目时出现错误

Question

代码分享如下：

html

<div>
  <canvas baseChart
          [data]="pieChartData"
          [colors]="colors"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
        >
  </canvas>
</div>

组件.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrl: './pie-chart.component.css'
})
export class PieChartComponent implements OnInit {

  pieChartData: number[] = [350,450,120];
  pieChartLabels: string[] = ['xyz','Logistics','Main st Bakery','Acme hosting'];
  colors: any[] = [
    {
      backgroundColor: ['#26547c','#ff6b6b','#ffd166']
    }
  ];
  pieChartType = 'pie'

  constructor(){}

  ngOnInit(){

  }
}

我想做饼图

Answer 1

经过

demo pie chart

下面是通过

ng2-charts

包生成的饼图的工作示例。进行了以下更改！

HTML 中的

1. chartType

   需要改为

   type

   。

2. backgroundColor

   需要设置在

   datasets

   数组内，而不是html

   中的

   colors
属性

3. pieChartData

   需要重组以包含其中的数据集

代码

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { NgChartsModule } from 'ng2-charts';
import { ChartData, ChartType } from 'chart.js';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgChartsModule],
  template: `
    <div>
      <canvas baseChart
              [data]="pieChartDataFinal"
              [labels]="pieChartLabels"
              [type]="pieChartType"
            >
      </canvas>
    </div>
  `,
})
export class App {
  pieChartLabels: string[] = [
    'xyz',
    'Logistics',
    'Main st Bakery',
    'Acme hosting',
  ];
  colors: any[] = [{}];
  public pieChartType: ChartType = 'pie';
  pieChartDataFinal: ChartData<'pie', number[], string | string[]> = {
    datasets: [
      {
        data: [350, 450, 120],
        backgroundColor: ['#26547c', '#ff6b6b', '#ffd166'],
      },
    ],
  };

  constructor() {}

  ngOnInit() {}
}

bootstrapApplication(App);

堆栈闪电战