Chart.js 3版本如何向外部自定义tooltip传递自定义数据

第一步：定义带自定义字段的数据集 #

你可以将每个数据项定义为对象结构，除了Chart.js需要的x/y（对应不同图表类型的维度字段）字段外，直接追加你需要的自定义属性，比如商品ID、图片链接、商品名称等：

const chartData = {
  datasets: [{
    label: '商品销量',
    data: [
      // 每个数据项自带自定义字段
      { x: '2024-01', y: 120, productId: 1001, productName: '无线耳机', imgUrl: '本地/线上图片地址', price: 199 },
      { x: '2024-02', y: 180, productId: 1002, productName: '智能手表', imgUrl: '本地/线上图片地址', price: 299 },
      // 其他数据项
    ]
  }]
}

第二步：在外部Tooltip逻辑中读取自定义数据 #

关闭默认Tooltip启用外部模式后，Tooltip回调参数的tooltip对象中会包含dataPoints数组，每个数据点的raw属性就对应你之前定义的完整数据对象，直接从中取自定义字段即可拼接你需要的HTML样式：

const chartConfig = {
  type: 'bar', // 可替换为你实际使用的图表类型
  data: chartData,
  options: {
    interaction: {
      mode: 'index',
      intersect: false,
    },
    plugins: {
      tooltip: {
        enabled: false, // 关闭默认tooltip
        external: (context) => {
          const tooltip = context.tooltip;
          // 拿到当前 hover 对应的数据点
          const dataPoint = tooltip.dataPoints[0];
          // 直接读取自定义字段
          const customData = dataPoint.raw;
          const { productId, productName, imgUrl, price } = customData;

          // 构建自定义tooltip DOM
          let tooltipEl = document.getElementById('custom-tooltip');
          if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'custom-tooltip';
            // 可提前给该元素加CSS样式控制外观、定位层级
            document.body.appendChild(tooltipEl);
          }
          if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
          }
          // 插入自定义内容，可完全按照你需要的效果图调整结构
          tooltipEl.innerHTML = `
            <div class="tooltip-title">${productName}</div>
            <img src="${imgUrl}" alt="${productName}" width="80">
            <div class="tooltip-item">售价：¥${price}</div>
            <div class="tooltip-item">当月销量：${dataPoint.parsed.y}</div>
            <div class="tooltip-item">商品ID：${productId}</div>
          `;
          // 定位逻辑可直接复用官方示例的坐标计算规则
          tooltipEl.style.opacity = 1;
          tooltipEl.style.left = `${tooltip.caretX}px`;
          tooltipEl.style.top = `${tooltip.caretY}px`;
        }
      }
    }
  }
}

补充方案 #

如果你不想修改原图表数据的结构，也可以单独维护一个自定义数据数组，保证数组索引和图表数据索引一一对应，在拿到dataPoint.dataIndex之后，直接取自定义数组对应下标的值即可。

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