Angular Chart.js实现点击Ng2折线图图例同步触发其他图表图例点击

核心逻辑：通过统一维护图例显隐状态，监听单图图例点击事件后广播状态变更，同步刷新所有图表实例。

实现步骤 #

• 第一步：维护公共图例显隐状态
  可以通过 Angular 服务或者父组件变量存储所有图例的显隐状态，数据结构参考：

  // key为图例名称，value为是否显示
  legendVisibility: Record<string, boolean> = {}
  // 存储所有Ng2折线图实例
  @ViewChildren(BaseChartDirective) chartList: QueryList<BaseChartDirective>
  

• 第二步：配置每个图表的图例点击回调
  在每个折线图的chartOptions中配置图例点击事件，触发公共状态更新：

  public lineChartOptions: ChartConfiguration['options'] = {
    plugins: {
      legend: {
        onClick: (event, legendItem, legend) => {
          const targetLabel = legendItem.text
          // 翻转当前图例显隐状态
          const newVisibility = !this.legendVisibility[targetLabel]
          this.legendVisibility[targetLabel] = newVisibility
          // 触发所有图表同步更新
          this.syncAllCharts(targetLabel, newVisibility)
        }
      }
    }
  }
  

• 第三步：实现同步更新方法
  遍历所有图表实例，更新对应数据集的显隐状态后刷新图表：

  syncAllCharts(label: string, visibility: boolean) {
    this.chartList.forEach(chart => {
      // 找到对应名称的数据集索引
      const datasetIndex = chart.chart?.data.datasets.findIndex(ds => ds.label === label)
      if (datasetIndex !== undefined && datasetIndex > -1) {
        // 更新数据集隐藏状态
        chart.chart!.data.datasets[datasetIndex].hidden = !visibility
        // 刷新图表
        chart.update()
      }
    })
  }
  

• 第四步：初始化状态同步
  图表首次渲染完成后，将所有图例的初始显隐状态同步到legendVisibility中，避免初始状态不一致。

效果说明 #

点击任意一个图表的图例后，所有图表的同名称图例对应数据集会同步显隐，效果符合预期：

注意：如果不同图表的图例命名不统一，可以额外维护一个图例名称映射表，替换代码中按label匹配的逻辑即可。

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