Morris图表添加学生后无需刷新页面更新的实现咨询

看起来你已经实现了添加学生后重新拉取数据的逻辑，但图表没有自动更新，这大概率是因为mk-morris-js组件在初始化完成后，没有监听graphData或graphOptions的变化来重新渲染图表。下面给你两种可行的解决方案：

方案一：强制图表组件重建（简单易实现） #

通过临时隐藏再显示图表组件，强制Angular重新初始化组件，从而加载新的数据。

修改组件代码（component.ts） #

1. 新增一个控制图表显示的属性：

showChart = true;

2. 更新generateChart方法，在设置数据后触发组件重建：

generateChart(graphRanks = [], names = [], yKeys = []) {
  this.graphData = graphRanks;
  this.graphOptions = {
    xkey: 'y',
    ykeys: yKeys,
    labels: names,
    resize: true,
    parseTime: false,
    pointSize: 0,
  };
  
  // 先隐藏图表，再延迟显示触发组件重建
  this.showChart = false;
  setTimeout(() => {
    this.showChart = true;
  }, 0);
}

修改模板代码（html） #

给图表容器加上*ngIf="showChart"：

<div *ngIf="showChart && graphData" mk-morris-js [options]="graphOptions" [data]="graphData" type="Line" style="height: 500px; width: 100%;"></div>

<!-- 你的模态框代码 -->
<button type="button" class="btn btn-primary" (click)="addStudent(name)">添加学生</button>

方案二：手动调用图表的更新方法（更优雅） #

如果mk-morris-js组件暴露了底层的Morris图表实例，你可以直接调用图表的setData方法来更新数据，无需重建组件。

修改组件代码（component.ts） #

1. 导入ViewChild并获取图表组件实例：

import { Component, OnInit, ViewChild } from '@angular/core';
// 根据你的实际组件库导入对应的Morris组件类型
import { MorrisJsComponent } from 'ngx-morris-js'; 

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  @ViewChild(MorrisJsComponent) morrisChart!: MorrisJsComponent;
  
  // 其他属性和方法...
  
  generateChart(graphRanks = [], names = [], yKeys = []) {
    this.graphData = graphRanks;
    this.graphOptions = {
      xkey: 'y',
      ykeys: yKeys,
      labels: names,
      resize: true,
      parseTime: false,
      pointSize: 0,
    };
    
    // 如果图表实例已存在，直接更新数据
    if (this.morrisChart?.chart) {
      this.morrisChart.chart.setData(this.graphData);
    }
  }
}

这个方案更高效，因为不需要销毁重建组件，但需要确认你使用的mk-morris-js组件确实暴露了chart实例（不同封装库的API可能略有差异）。

为什么之前的代码不生效？ #

你调用getData()重新拉取数据并更新graphData和graphOptions后，Angular的变更检测会更新组件的属性，但mk-morris-js组件通常只在初始化时读取一次数据和配置，后续属性变化不会自动触发图表更新，所以需要我们手动触发更新或重建组件。

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