Angular 6中EJ2 Syncfusion散点图按钮点击数据绑定失效求助

这是个很常见的Syncfusion图表数据更新问题——当你在组件初始化后（比如按钮点击）更新数据源时，Angular的变更检测可能没有及时通知图表组件，或者图表本身需要手动触发刷新来识别新数据。下面是具体的解决方案：

核心原因 #

在ngOnInit中调用PlotChart()时，组件正处于初始化生命周期，Angular会自动执行变更检测，图表组件能感知到数据源的变化并渲染。但按钮点击属于异步操作，数据更新后图表没有自动触发重绘，仅title因为是简单字符串绑定生效，而复杂的数据源对象变更没被图表捕获。

解决方案步骤 #

1. 获取图表组件实例

首先需要通过ViewChild获取Syncfusion Chart的实例，这样就能手动调用它的refresh()方法来触发重绘。

2. 修改组件代码（.ts文件）

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ChartData } from '../chartdata.service';
// 引入Syncfusion Chart组件
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

export class ScatterComponent implements OnInit {
  public series1: Object;
  public series2: Object;
  public title: string;
  // 通过模板引用变量获取图表实例
  @ViewChild('chartContainer') chart: ChartComponent;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
    // this.PlotChart(); //-> this works!!
  }

  public PlotChart(): void {
    this.title = 'Height Vs Weight';
    // 获取数据
    this.series1 = ChartData.prototype.getScatterData().series1;
    this.series2 = ChartData.prototype.getScatterData().series2;

    // 先触发Angular变更检测，确保组件识别到数据变化
    this.cdr.detectChanges();

    // 手动调用图表的refresh方法，强制重绘
    if (this.chart) {
      this.chart.refresh();
    }
  }
}

3. 修改模板代码（.html文件）

给<ejs-chart>添加模板引用变量#chartContainer，让ViewChild能定位到组件：

<ejs-chart #chartContainer id="chart-container"> 
  <e-series-collection> 
    <e-series [dataSource]="series1" type="Scatter" name="Male"></e-series> 
    <e-series [dataSource]="series2" type="Scatter" name="Female"></e-series> 
  </e-series-collection> 
</ejs-chart> 
<div> 
  <button ejs-button (click)="PlotChart()">Draw</button> 
</div>

额外说明 #

• 为什么用ChangeDetectorRef？确保Angular先检测到数据变更，再让图表刷新，避免因为数据还没更新完成就触发刷新导致无效。
• 如果不想用ChangeDetectorRef，也可以用setTimeout延迟调用refresh()，让Angular的变更检测先完成：

  setTimeout(() => {
    if (this.chart) {
      this.chart.refresh();
    }
  }, 0);
  

这样修改后，点击按钮就能正常渲染散点图系列了。

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