如何在Chart.js雷达图的标签上显示Tooltip？

我了解可在dataset上显示tooltip，现请教是否能在雷达图标签上显示tooltip？例如鼠标悬停“Drinking”标签时，展示该标签的相关描述。

示例雷达图：

Chart.js 默认不支持雷达图标签的tooltip，但可以通过自定义插件实现，核心是监听鼠标事件，判断是否 hover 在标签区域，再显示对应描述。

1. 准备标签描述数据 #

先定义每个标签对应的说明内容：

const labelDescriptions = {
  'Eating': '每日进食次数与热量摄入统计',
  'Drinking': '每日饮水量与饮品类型记录',
  'Sleeping': '每日睡眠时间与睡眠质量评分',
  'Designing': '每日设计工作时长与产出数量',
  'Coding': '每日代码编写时长与代码行数统计',
  'Cycling': '每日骑行里程与消耗热量统计',
  'Running': '每日跑步里程与配速记录'
};

2. 编写自定义插件 #

通过Chart.js插件机制实现hover判定和tooltip绘制：

const radarLabelTooltipPlugin = {
  id: 'radarLabelTooltip',
  afterDraw: function(chart) {
    const { ctx, chartArea } = chart;
    const center = { x: chartArea.x, y: chartArea.y };
    const scale = chart.scales.r;
    
    scale.ticks.forEach((tick, index) => {
      const angle = scale.getIndexAngle(index);
      // 计算标签的坐标位置
      const labelX = center.x + scale.drawingArea * Math.cos(angle);
      const labelY = center.y + scale.drawingArea * Math.sin(angle);
      
      // 判断鼠标是否在标签附近
      const mousePos = chart._lastMousePosition;
      if (!mousePos) return;
      const distance = Math.sqrt(Math.pow(mousePos.x - labelX, 2) + Math.pow(mousePos.y - labelY, 2));
      
      if (distance < 20) { // 可调整hover判定的范围半径
        const desc = labelDescriptions[tick.label];
        if (!desc) return;
        
        // 绘制tooltip背景
        ctx.fillStyle = 'rgba(0,0,0,0.8)';
        const textWidth = ctx.measureText(desc).width;
        ctx.fillRect(mousePos.x + 10, mousePos.y - 15, textWidth + 10, 25);
        
        // 绘制tooltip文本
        ctx.fillStyle = '#fff';
        ctx.font = '12px Arial';
        ctx.fillText(desc, mousePos.x + 15, mousePos.y - 5);
      }
    });
  },
  afterEvent: function(chart, event) {
    // 更新鼠标位置并触发重绘
    if (event.type === 'mousemove') {
      chart._lastMousePosition = { x: event.x, y: event.y };
      chart.draw();
    } else if (event.type === 'mouseout') {
      chart._lastMousePosition = null;
      chart.draw();
    }
  }
};

3. 注册插件并初始化图表 #

创建雷达图时注册该插件：

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

// 初始化图表
const ctx = document.getElementById('myRadarChart').getContext('2d');
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40],
      fill: true,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    }]
  },
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  }
});

调整说明 #

• 可以修改tooltip的背景色、字体大小、位置等样式
• distance < 20 中的数值可根据标签实际大小调整hover判定范围
• 若需要更复杂的tooltip样式，也可以用HTML元素替代canvas绘制的方式

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