Chart.js环形图与柱状图联动过滤：点击标签同步控制对应数据

阿华AIGC实验室

2026-5-15

实现Chart.js环形图与柱状图的数据同步禁用功能

当然可以实现这个需求！Chart.js自带的事件监听能力就能帮我们搞定环形图和柱状图的数据同步禁用，核心思路是监听环形图的图例点击事件，然后同步修改柱状图对应数据项的可见状态。下面是具体的实现方案和修改后的代码：

第一步：统一数据源（可选但推荐）

为了确保两个图表的数据完全对应，最好先定义一个共享的数据源对象，避免两边数据不一致的问题：

// 共享的数据源，标签和数据长度要匹配哦
const sharedChartData = {
  labels: ['Test 1', 'Test 2', 'Test 3'],
  datasets: [{
    label: "Example",
    backgroundColor: ["#F2C15A", "#F58557", "#F55B51"],
    data: [300, 200, 600]
  }]
};

注意：你原来的环形图代码里labels只有3项，但data有8项，这会导致图表渲染异常，我已经调整成匹配的长度啦。

第二步：修改环形图的配置，添加图例点击监听

在环形图的options里，给legend添加onClick事件处理函数，用来同步更新柱状图的状态：

// 初始化环形图
const doughnutChart = new Chart(document.getElementById("pieChartt"), {
  type: 'doughnut',
  data: sharedChartData,
  options: {
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          const allData = data.datasets[tooltipItem.datasetIndex].data;
          const tooltipLabel = data.labels[tooltipItem.index];
          const tooltipData = allData[tooltipItem.index];
          const total = allData.reduce((sum, val) => sum + val, 0);
          const tooltipPercentage = Math.round((tooltipData / total) * 100);
          return `${tooltipLabel}: ${tooltipData} (${tooltipPercentage}%)`;
        }
      }
    },
    // 添加图例点击事件
    legend: {
      onClick: function(e, legendItem) {
        const chart = this.chart;
        const index = legendItem.index;
        const meta = chart.getDatasetMeta(0);
        
        // 切换环形图当前项的可见状态
        meta.data[index].hidden = !meta.data[index].hidden;
        
        // 同步切换柱状图对应项的可见状态
        const barMeta = myBarChart.getDatasetMeta(0);
        barMeta.data[index].hidden = meta.data[index].hidden;
        
        // 刷新两个图表
        chart.update();
        myBarChart.update();
      }
    }
  }
});

第三步：初始化柱状图时使用共享数据源

确保柱状图使用和环形图一致的数据源（如果你的areaChartData本来就和环形图数据一致，直接用就行，这里用共享数据源做示例）：

// 初始化柱状图
const myBarChart = new Chart(barChartCanvas, {
  type: 'bar',
  data: sharedChartData, // 使用共享数据源
  options: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: "#000080",
      }
    },
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: "Test Label",
          fontColor: "black"
        }
      }]
    }
  }
});