ng-apexcharts动态更新图表时清除柱状图上次选中状态问题

你之前尝试通过updateOptions修改chart.selection.xaxis的方式无法清除选中状态，是因为ApexCharts提供了专门的resetSelection方法来处理这类场景，而非通过更新配置项。以下是可行的解决方案：

方法1：通过ng-apexcharts组件实例调用重置方法 #

在Angular组件中，先通过@ViewChild获取图表实例，再在切换图表时先执行重置选中状态的操作，再更新图表数据：

import { Component, ViewChild } from '@angular/core';
import { ApexChart } from 'ng-apexcharts';

@Component({
  selector: 'app-column-chart',
  template: `
    <apx-chart #columnChart [series]="currentSeries" [chart]="chartConfig"></apx-chart>
    <button (click)="switchToAnnual()">切换年度结果</button>
    <button (click)="switchToQuarterly()">切换季度结果</button>
  `
})
export class ColumnChartComponent {
  @ViewChild('columnChart') columnChart: any;
  currentSeries = quarterlySeries;
  chartConfig = { /* 你的图表基础配置 */ };

  // 切换到年度结果
  switchToAnnual() {
    // 先清除选中状态
    this.columnChart.resetSelection();
    // 更新图表数据
    this.columnChart.updateOptions({
      series: annualSeries,
      colors: annualColors,
      fill: { colors: annualColors }
    });
  }

  // 切换到季度结果
  switchToQuarterly() {
    this.columnChart.resetSelection();
    this.columnChart.updateOptions({
      series: quarterlySeries,
      colors: quarterlyColors,
      fill: { colors: quarterlyColors }
    });
  }
}

方法2：通过ApexCharts.exec命令重置 #

如果是通过图表ID操作，可先执行resetSelection命令，再更新图表配置：

// 先清除选中状态
window.ApexCharts.exec(destChartIDToUpdate, 'resetSelection');
// 再更新图表数据和配置
window.ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
  series: series,
  colors: colors,
  fill: { colors: colors }
});

核心逻辑是：在更新图表数据前，先调用resetSelection方法清除之前的选中状态，这样切换图表后就不会保留旧的选中样式。

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