如何在点击ChartJS图例时隐藏图表其他区域？

当然可以实现！在Angular 2+里，我们只需要重写Chart.js的图例点击回调函数，就能把默认的「切换单个系列显示/隐藏」改成「点击后仅保留当前系列，隐藏其余所有」。下面是具体的实现方案，我会用常用的ng2-charts封装库来举例（原生Chart.js的逻辑完全一致，只是获取图表实例的方式略有不同）：

1. 确保依赖已安装（如果还没装的话） #

如果你的项目里还没引入Chart.js和ng2-charts，先执行下面的命令安装：

npm install chart.js ng2-charts

2. 组件代码实现 #

组件类（.ts文件） #

这里以柱状图为例，核心是在图表配置的legend.onClick中自定义点击逻辑：

import { Component } from '@angular/core';
import { ChartConfiguration, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-custom-chart',
  templateUrl: './custom-chart.component.html',
  standalone: true,
  imports: [BaseChartDirective]
})
export class CustomChartComponent {
  // 图表标签
  public chartLabels: string[] = ['一月', '二月', '三月', '四月', '五月'];
  // 图表数据集
  public chartData: ChartConfiguration['data'] = {
    labels: this.chartLabels,
    datasets: [
      { data: [65, 59, 80, 81, 56], label: '系列A', backgroundColor: '#ff6384' },
      { data: [28, 48, 40, 19, 86], label: '系列B', backgroundColor: '#36a2eb' },
      { data: [45, 25, 60, 30, 70], label: '系列C', backgroundColor: '#ffce56' }
    ]
  };
  // 图表类型（这里用柱状图，换成折线图/饼图等都适用）
  public chartType: ChartType = 'bar';
  // 核心配置：自定义图例点击行为
  public chartOptions: ChartConfiguration['options'] = {
    responsive: true,
    legend: {
      onClick: (event, legendItem) => {
        // 获取当前点击的图例对应的数据集索引
        const clickedIndex = legendItem.datasetIndex;
        // 获取图表实例
        const chart = (event.target as HTMLElement).closest('canvas')?.__chart__ as any;
        
        // 遍历所有数据集：仅保留点击的系列显示，其余隐藏
        chart.data.datasets.forEach((dataset: any, index: number) => {
          dataset.hidden = index !== clickedIndex;
        });
        
        // 刷新图表，让修改生效
        chart.update();
      }
    }
  };
}

组件模板（.html文件） #

<div style="width: 80%; margin: 0 auto;">
  <canvas baseChart
          [data]="chartData"
          [options]="chartOptions"
          [type]="chartType">
  </canvas>
</div>

3. 优化：支持点击同图例恢复全系列显示 #

上面的代码实现了「点击图例仅保留当前系列」，如果想让用户再次点击同一个图例时恢复所有系列显示，可以修改onClick函数，增加一个判断逻辑：

onClick: (event, legendItem) => {
  const clickedIndex = legendItem.datasetIndex;
  const chart = (event.target as HTMLElement).closest('canvas')?.__chart__ as any;
  
  // 检查当前点击的系列是否已经是唯一显示的
  const isOnlyVisible = !chart.data.datasets[clickedIndex].hidden && 
    chart.data.datasets.every((ds: any, idx: number) => idx === clickedIndex ? !ds.hidden : ds.hidden);
  
  if (isOnlyVisible) {
    // 恢复所有系列显示
    chart.data.datasets.forEach((ds: any) => ds.hidden = false);
  } else {
    // 仅保留当前系列显示
    chart.data.datasets.forEach((ds: any, idx: number) => ds.hidden = idx !== clickedIndex);
  }
  
  chart.update();
}

4. 原生Chart.js的适配说明 #

如果你没有用ng2-charts，直接用原生Chart.js初始化图表，逻辑是一样的，只是获取图表实例的方式不同。比如你可以在组件里直接创建Chart实例并保存引用：

// 原生Chart.js示例片段
import { Chart } from 'chart.js';
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-native-chart',
  template: '<canvas #chartCanvas></canvas>'
})
export class NativeChartComponent implements AfterViewInit {
  @ViewChild('chartCanvas') chartCanvas!: ElementRef<HTMLCanvasElement>;
  private chartInstance!: Chart;

  ngAfterViewInit(): void {
    this.chartInstance = new Chart(this.chartCanvas.nativeElement, {
      type: 'bar',
      data: {
        labels: ['一月', '二月', '三月', '四月', '五月'],
        datasets: [
          { data: [65, 59, 80, 81, 56], label: '系列A', backgroundColor: '#ff6384' },
          { data: [28, 48, 40, 19, 86], label: '系列B', backgroundColor: '#36a2eb' }
        ]
      },
      options: {
        legend: {
          onClick: (event, legendItem) => {
            // 这里直接用this.chartInstance操作即可
            const clickedIndex = legendItem.datasetIndex;
            // 后续逻辑和上面一致...
          }
        }
      }
    });
  }
}

这样就完美实现了你想要的反向图例点击效果啦！

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