如何通过ChartJS的onClick事件点击饼图触发表格显隐切换

架构老林

2026-9-26

问题原因

你封装的show()函数逻辑存在错误：它没有直接执行表格显隐切换的操作，只是重复给切换按钮绑定点击事件监听器，调用时自然不会触发表格状态变化。

解决方案

你可以把表格切换逻辑单独抽成公共函数，同时供按钮点击和饼图点击调用，实现逻辑复用：

首先定义公共的表格切换函数，同时给按钮绑定点击事件

// 封装表格显隐切换的公共逻辑
function toggleTableDisplay() {
  const targetTable = document.getElementById("displaytable");
  // 兼容初始未设置inline style的场景
  if (targetTable.style.display === "none" || !targetTable.style.display) {
    // 表格元素使用display: table比block更规范，避免出现布局偏移
    targetTable.style.display = "table";
  } else {
    targetTable.style.display = "none";
  }
}

// 页面加载后给原有切换按钮绑定事件
document.getElementById("toggleVisibilityButton").addEventListener("click", toggleTableDisplay);

然后修改ChartJS的onClick配置，直接调用上述公共函数即可

onClick: (evt, activeEls) => {
  // 未点击到扇区时不执行逻辑
  if (!activeEls.length) return;
  // 切换表格显隐
  toggleTableDisplay();
  // 后续填充表格数据的逻辑可在此处编写，示例如下：
  // const curLabel = activeEls[0]._chart.data.labels[activeEls[0]._index];
  // const curValue = activeEls[0]._chart.data.datasets[activeEls[0].datasetIndex].data[activeEls[0]._index];
  // 把curLabel、curValue写入表格对应单元格即可
},