Vue.js中Chart.js折线图Tooltip自定义方案求助

要实现「10 Answers July 19,2023」格式的Tooltip，你需要直接改写Chart.js Tooltip的label回调函数，而非使用beforeLabel或afterLabel（这两个配置仅用于在原有标签前后追加内容，无法完全替换成你需要的组合格式）。

以下是结合Vue.js的完整配置示例：

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

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

const lineChart = ref(null);

onMounted(() => {
  if (lineChart.value) {
    new Chart(lineChart.value, {
      type: 'line',
      data: {
        // 示例日期标签，可替换为你的实际数据
        labels: ['2023-07-19', '2023-07-20', '2023-07-21'],
        datasets: [{
          data: [10, 18, 25], // 示例数值，对应你的"Answers"数量
          borderColor: '#4bc0c0',
          fill: false
        }]
      },
      options: {
        plugins: {
          tooltip: {
            callbacks: {
              // 自定义Tooltip核心内容
              label: (context) => {
                // 获取当前数据点的数值
                const answerCount = context.parsed.y;
                // 格式化日期为"July 19,2023"样式
                const formattedDate = new Date(context.label).toLocaleDateString('en-US', {
                  month: 'long',
                  day: 'numeric',
                  year: 'numeric'
                });
                // 返回拼接后的最终文本
                return `${answerCount} Answers ${formattedDate}`;
              },
              // 隐藏Tooltip默认的标题（如果不需要的话）
              title: () => []
            }
          }
        }
      }
    });
  }
});
</script>

关键说明： #

• 如果你的x轴日期不是字符串格式（比如是时间戳），只需将context.label替换为new Date(context.parsed.x)即可。
• 若需要更灵活的日期格式化，可以使用date-fns或moment.js等工具库替代toLocaleDateString。
• 如果存在多个数据集，可通过context.datasetIndex区分不同数据集的内容。

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