Chart.js v4及以上版本如何为标题（及副标题）绑定onClick事件？

完全可以实现，核心思路是直接给Chart.js生成的标题/副标题DOM元素绑定点击事件——因为v4+版本中，图表标题是渲染在canvas外部的独立DOM节点，不再属于options.onClick的触发范围。

具体实现步骤 #

• 确保图表配置中开启标题/副标题的显示
• 图表初始化完成后，通过DOM选择器定位标题/副标题元素
• 为目标元素绑定click事件处理逻辑

代码示例 #

图表初始化配置

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: '主标题（可点击）',
        font: { size: 18 }
      },
      subtitle: {
        display: true,
        text: '副标题（也可点击）'
      }
    }
  }
});

绑定点击事件

// 监听主标题点击
document.querySelector('.chart-title').addEventListener('click', () => {
  console.log('主标题被点击');
  // 自定义逻辑：比如切换图表类型、更新数据等
});

// 监听副标题点击
document.querySelector('.chart-subtitle').addEventListener('click', () => {
  console.log('副标题被点击');
});

注意事项 #

• 若页面存在多个图表，需使用更精准的选择器（比如结合图表容器的ID），避免误绑定：document.querySelector('#chart-container .chart-title')
• 动态更新标题内容后，无需重新绑定事件，因为DOM节点未发生变化
• 标题元素的默认类名是chart-title，副标题是chart-subtitle，可通过插件配置自定义类名

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