自定义 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,
      },
    },
  },
});

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。