在画布外部显示Chartjs工具提示值-多线图

// 引入Chartjs库
import Chart from 'chart.js';

// 创建Chart实例
const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    // 数据配置
    // ...
  },
  options: {
    tooltips: {
      enabled: false, // 禁用默认的工具提示显示
    },
    plugins: {
      afterDraw: (chart) => {
        const ctx = chart.ctx;
        const tooltip = chart.tooltip;
        
        if (tooltip.opacity === 0) {
          return;
        }
        
        // 绘制工具提示的值在画布外部的位置
        ctx.save();
        ctx.font = tooltip.bodyFont.string;
        ctx.fillStyle = tooltip.bodyFont.color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const x = tooltip.caretX;
        const y = tooltip.caretY - 10; // 调整位置
        
        // 获取工具提示的值
        const tooltipValue = tooltip.dataPoints[0].value;
        
        // 绘制工具提示的值
        ctx.fillText(tooltipValue, x, y);
        
        ctx.restore();
      },
    },
    // 其他配置选项
    // ...
  },
});