Angular 8 + ChartJS：HTTP请求数据无法更新环形图问题求助

问题原因 #

• 混合使用冲突的图表逻辑：你同时用了angular-morris-js的mk-morris-js指令和原生Chart.js实例化图表，这两者完全冲突。mk-morris-js指令已经会自动初始化Morris环形图，手动创建Chart.js实例不仅没用，还会干扰原有渲染逻辑。
• 数组变更未触发Angular检测：用push给donutChartData数组加元素时，数组的引用没有改变，Angular默认的变更检测机制无法感知到数组内部内容的变化，导致mk-morris-js指令不会重新渲染图表。
• 无效的Chart.js实例化：你创建Chart实例时传入的第二个参数是null，这本身就是错误用法，生成的是无效实例，完全没必要保留这部分代码。

修复方案 #

1. 清理冗余代码 #

删除所有Chart.js相关的导入和实例化逻辑，因为你使用的是封装好的angular-morris-js，不需要原生Chart.js参与。

2. 正确更新数据数组 #

不要用push添加元素，而是直接重新赋值一个新数组，让Angular能通过引用变化检测到数据更新，触发图表重新渲染。

修改后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { ChartData } from 'angular-morris-js';

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor(
        private dataService: DataService
    ) {}

    donutChartData: ChartData[] = [];

    public donutChartOptions = {
        colors : ['rgba(218,142,26,0.61)', 'rgba(10,82,166,0.72)', 'rgba(218,26,212,0.61)']
    };

    ngOnInit() {
        this.loadChartData();
    }

    loadChartData() {
        this.dataService.getData().subscribe(
            (response: any) => {
                const dataGroup1 = response.body.dataOne;
                const dataGroup2 = response.body.dataTwo;

                // 直接赋值新数组，触发Angular变更检测
                this.donutChartData = [
                    { label: 'Group 1', value: dataGroup1 },
                    { label: 'Group 2', value: dataGroup2 }
                ];
            }
        );
    }
}

3. （可选）手动触发变更检测 #

如果上述修改后图表仍未更新，可以导入ChangeDetectorRef手动触发检测：

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

// 组件构造函数注入
constructor(
    private dataService: DataService,
    private cdr: ChangeDetectorRef
) {}

// 在赋值数据后调用
this.donutChartData = [/* 新数据 */];
this.cdr.detectChanges();

HTML代码保持不变 #

<div class="col-md-12 center-flex-column" id="donutChart1" mk-morris-js 
    [data]="donutChartData" [options]="donutChartOptions" size="100" 
    type="Donut"
></div>

内容的提问来源于stack exchange，提问作者Fornazari