Chart.js折线图中如何阻止Tooltip点击外部后消失？

要实现Tooltip始终显示在最近点击的数据点上，可通过自定义Tooltip控制逻辑结合事件监听来实现，以下是Vue项目中的具体方案：

核心思路 #

1. 保存最近点击的数据点引用，明确Tooltip的显示锚点；
2. 覆盖Chart.js默认的Tooltip自动隐藏行为；
3. 监听全局点击事件，点击图表外部时强制重新显示Tooltip。

代码实现 #

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

export default {
  data() {
    return {
      chart: null,
      activeTooltipPoint: null // 存储最近点击的数据点元素
    }
  },
  mounted() {
    this.initChart()
    // 监听全局点击，处理外部点击时的Tooltip显示
    document.addEventListener('click', (e) => {
      const chartEl = this.$refs.chartCanvas
      if (!chartEl.contains(e.target) && this.activeTooltipPoint) {
        this.chart.showTooltip([this.activeTooltipPoint], true)
      }
    })
  },
  beforeUnmount() {
    this.chart?.destroy()
    document.removeEventListener('click', () => {})
  },
  methods: {
    initChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d')
      this.chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['1月', '2月', '3月', '4月', '5月'],
          datasets: [{
            label: '销量',
            data: [12, 19, 3, 5, 2],
            borderColor: '#ff0000',
            tension: 0.1
          }]
        },
        options: {
          interaction: {
            mode: 'nearest',
            intersect: true
          },
          // 捕获数据点点击事件
          onClick: (e, elements) => {
            if (elements.length) {
              this.activeTooltipPoint = elements[0]
              this.chart.showTooltip([this.activeTooltipPoint], true)
            }
          },
          plugins: {
            tooltip: {
              // 阻止Tooltip自动隐藏
              onHide: () => {
                return !this.activeTooltipPoint
              },
              // 仅通过点击触发Tooltip（可选）
              trigger: 'click'
            }
          }
        }
      })
    }
  }
}
</script>

关键说明 #

• activeTooltipPoint：存储最近点击的图表元素，作为Tooltip显示的锚点；
• tooltip.onHide：返回false时阻止Tooltip隐藏，只有当无活跃点时才允许隐藏；
• 全局点击监听：检测点击是否发生在图表外部，若是则调用showTooltip强制显示；
• 组件销毁时需清理事件监听和图表实例，避免内存泄漏。

拓展：手动关闭Tooltip #

若需要允许用户手动关闭Tooltip，可添加一个按钮，点击时清空activeTooltipPoint即可：

closeTooltip() {
  this.activeTooltipPoint = null
  this.chart.hideTooltip()
}

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