Angular5 + ChartJS：多个图表堆叠显示问题求助

看起来你遇到的是典型的订阅泄漏导致的重复渲染问题——每次路由参数变化时，你都创建了一个新的服务Observable订阅，但之前的订阅并没有被取消，这就导致旧的图表实例没有被清理，新的图表又叠加在上面，最终出现堆叠的异常情况。

问题根源拆解 #

你的代码结构大概是这样的（模拟场景）：

ngOnInit() {
  this.route.params.subscribe(params => {
    // 每次路由变化都会创建新的内层订阅
    this.chartDataService.getData(params.id).subscribe(data => {
      this.renderChart(data);
    });
  });
}

这种嵌套订阅的核心问题在于：每次params发出新值时，内层的getData订阅都会被重新创建，但之前的订阅并没有被销毁，所以renderChart会被多次执行，旧的图表DOM元素没有被移除，新的图表直接渲染在同一个容器里，就造成了堆叠效果。

解决方案 #

1. 使用switchMap扁平化订阅（推荐方案）

switchMap操作符会自动取消前一个Observable的订阅，只保留最新的订阅，完美适配这种路由参数变化后需要重新获取数据的场景：

import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.route.params.pipe(
    switchMap(params => this.chartDataService.getData(params.id))
  ).subscribe(data => {
    // 渲染新图表前先清理旧实例
    this.clearOldChart();
    this.renderChart(data);
  });
}

2. 手动管理订阅，组件销毁时统一取消

如果需要保留嵌套订阅的写法，一定要把所有订阅都收集到Subscription对象中，在ngOnDestroy生命周期钩子中统一取消：

import { Subscription } from 'rxjs';

private subscriptions = new Subscription();

ngOnInit() {
  const paramsSub = this.route.params.subscribe(params => {
    const dataSub = this.chartDataService.getData(params.id).subscribe(data => {
      this.clearOldChart();
      this.renderChart(data);
    });
    this.subscriptions.add(dataSub);
  });
  this.subscriptions.add(paramsSub);
}

ngOnDestroy() {
  // 取消所有订阅，避免内存泄漏和重复渲染
  this.subscriptions.unsubscribe();
}

3. 确保图表容器被正确清空

不管用哪种订阅方式，在渲染新图表前，一定要先清空图表所在的DOM容器，同时销毁第三方图表库的实例（如果使用了的话）：

clearOldChart() {
  const chartContainer = document.getElementById('chart-container');
  if (chartContainer) {
    // 清空容器内所有DOM元素
    chartContainer.innerHTML = '';
    // 如果用了ECharts/Highcharts等库，调用官方销毁方法
    if (this.chartInstance) {
      this.chartInstance.destroy();
      this.chartInstance = null;
    }
  }
}

额外注意点 #

• 如果你使用的是第三方图表库（比如ECharts、Chart.js），一定要调用官方提供的销毁方法，而不仅仅是清空DOM，否则可能会残留事件监听或内存泄漏。
• 尽量避免嵌套订阅，使用RxJS的操作符（switchMap、mergeMap等）来扁平化数据流，这是Angular开发的最佳实践。

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