如何让Chart.js中的所有提示框（tooltip）同时显示？

Chart.js没有原生配置项能直接让所有数据点的提示框默认保持可见，但可以通过以下两种方式实现需求：

方法一：自定义插件强制显示所有Tooltip #

通过编写Chart.js插件，覆盖Tooltip的隐藏逻辑，同时主动触发所有数据点的Tooltip显示：

// 定义插件
const showAllTooltips = {
  id: 'showAllTooltips',
  afterInit(chart) {
    // 禁用Tooltip的隐藏功能
    chart.tooltip.hide = () => {};
  },
  afterDraw(chart) {
    // 收集所有数据点的元素信息
    const activeElements = [];
    chart.data.datasets.forEach((dataset, dsIndex) => {
      dataset.data.forEach((_, dataIndex) => {
        const element = chart.getDatasetMeta(dsIndex).data[dataIndex];
        activeElements.push({ datasetIndex: dsIndex, index: dataIndex, element });
      });
    });
    // 手动设置激活元素并更新Tooltip
    chart.tooltip.setActiveElements(activeElements);
    chart.tooltip.update(true);
  }
};

// 注册插件
Chart.register(showAllTooltips);

// 初始化图表示例
const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Sales', data: [100, 200, 150] }]
  },
  options: {
    tooltip: {
      enabled: true,
      // 可选：调整Tooltip位置避免重叠，比如设为'average'或'nearest'
      position: 'average'
    }
  }
});

这种方式完全复用原生Tooltip的样式和逻辑，只是强制让它一直显示所有数据点的提示。

方法二：用标注插件模拟Tooltip效果 #

如果不需要原生Tooltip的交互，可以使用chartjs-plugin-annotation插件，为每个数据点添加自定义文本标注来替代Tooltip：

1. 先安装插件：

npm install chartjs-plugin-annotation

2. 配置图表：

Chart.register(Annotation);

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Sales', data: [100, 200, 150] }]
  },
  options: {
    plugins: {
      annotation: {
        annotations: (context) => {
          const annotations = [];
          const chart = context.chart;
          chart.data.datasets.forEach((dataset, dsIndex) => {
            dataset.data.forEach((value, dataIndex) => {
              const element = chart.getDatasetMeta(dsIndex).data[dataIndex];
              // 添加文本标注模拟Tooltip
              annotations.push({
                type: 'text',
                x: element.x,
                y: element.y - 15, // 调整位置避免遮挡数据点
                content: `${dataset.label}: ${value}`,
                font: { size: 12 },
                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                color: '#fff',
                padding: { top: 4, bottom: 4, left: 6, right: 6 },
                borderRadius: 4
              });
            });
          });
          return annotations;
        }
      }
    }
  }
});

这种方式更灵活，能自定义标注的样式和位置，但没有原生Tooltip的交互能力。

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