问题1

正如@Stefan提到的，由于可观察对象是异步的，因此在subscribe()回调中移动this.createChart()。通过移动到回调中，将保证this.createChart()在返回可观察对象时执行。

this.fruitService.getFruits().subscribe((response) => {
  this.fruits = response.fruits;

  this.createChart();
});

问题2

我认为您安装的 chart.js 版本为3或更高版本，这与您当前的Chart.js配置不兼容。根据文档，不再支持xAxes和yAxes。请按照迁移说明进行操作：

• 删除了xAxes和yAxes阵列，轴选项现在是按比例ID键控的单独比例
• legend、title和tooltip命名空间已从options移动到options.plugins

要从组件呈现图表（回写代码），您应该使用@ViewChild装饰器。
您的代码应该如下所示：
组件

import { ElementRef, ViewChild } from '@angular/core';
import { ChartOptions } from 'chart.js';

@ViewChild('baseChart', { static: true })
  canvasElem: ElementRef<HTMLCanvasElement>;

  createChart() {
    if (this.chart) {
      this.chart.destroy();
    }

    // Extract the labels and data from the fruits array
    const labels = this.fruits.map((fruit: any) => fruit.fruit);
    const data = this.fruits.map((fruit: any) => fruit.amountBought);

    const ctx = this.chart.nativeElement.getContext('2d');
    this.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            data: data,
            borderColor: '#3cba9f',
            fill: false,
          },
          {
            data: data,
            borderColor: '#ffcc00',
            fill: false,
          },
        ],
      },

      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
        scales: {
          x: {
            display: true,
          },

          y: {
            display: true,
            ticks: {
              beginAtZero: true,
            },
          },
        },
      } as ChartOptions<'line'>,
    });
  }

超文本标记语言

<canvas #baseChart class="chart"></canvas>

Demo @ StackBlitz

在你们的帮助下我完成了代码！非常感谢！下面是工作代码：

import { Chart } from 'chart.js/auto';

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

import { Fruit } from './fruit.model';
import { FruitService } from './fruit.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'angular-fetch-json-data';
  public fruits: Fruit[];
  public chart: any;

  public constructor(private fruitService: FruitService){
  }

  public ngOnInit(): void {
    this.fruitService.getFruits().subscribe((response) => {
      this.fruits = response.fruits;
      this.createChart();
    })
  }

  createChart() {
    if (this.chart) {
      this.chart.destroy();
    }

    // Extract the labels and data from the fruits array
    const labels = this.fruits.map((fruit: any) => fruit.fruit);
    const data = this.fruits.map((fruit: any) => fruit.amountBought);

    
    this.chart = new Chart('canvas', {
      type: 'line', 
      data: {
        labels: labels,
        datasets: [
          {
            data: data,
            borderColor: '#3cba9f', 
            fill: false 
          },
        ]
      },
      options: {
        scales: {
          xAxes: {
            display: true
          },
          yAxes: {
            display: true,
              beginAtZero: true
            
          }
        }
      }
    });
  }
}