自定义 Tooltip

Chart.js 提供了强大的 Tooltip 自定义功能。通过配置 options.plugins.tooltip，可以自定义 Tooltip 的显示内容、格式、样式等，满足不同场景需求。

以下示例演示如何使用回调函数自定义 Tooltip 显示的文本格式，包括添加单位和自定义标题。

const ctx = document.getElementById('customTooltipChart').getContext('2d');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '温度',
      data: [3, 6, 9, 7, 5],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          title: function(context) {
            return '月份：' + context[0].label;
          },
          label: function(context) {
            return '温度：' + context.parsed.y + ' °C';
          }
        }
      },
      legend: {
        display: true
      }
    }
  }
});

loading