如何在React-chartjs-2中自定义折线图的数据点信息气泡？

要修改折线图的悬停提示内容，核心是利用Chart.js的tooltip配置项，重写其回调函数来生成自定义文本。以下是具体实现步骤：

核心思路 #

通过配置图表的plugins.tooltip.callbacks.label函数，获取当前悬停数据点的X轴（日期）、Y轴（金额）值，判断涨跌后拼接成目标文本。

代码实现 #

修改你的折线图配置，重点调整options中的tooltip部分：

import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

// 注册ChartJS所需组件
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// 示例数据：X轴为日期，Y轴为金额
const chartData = {
  labels: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04"],
  datasets: [
    {
      label: "金额走势",
      data: [100, 90, 110, 105],
      borderColor: "rgb(75, 192, 192)",
      backgroundColor: "rgba(75, 192, 192, 0.2)",
    },
  ],
};

const chartOptions = {
  responsive: true,
  plugins: {
    tooltip: {
      // 自定义悬停提示文本
      callbacks: {
        label: (context) => {
          const date = context.label; // 获取当前X轴的日期值
          const currentValue = context.parsed.y;
          const index = context.dataIndex;
          // 对比前一个数据点判断涨跌（若为第一个点则默认持平）
          const prevValue = index > 0 ? context.dataset.data[index - 1] : currentValue;
          const changeType = currentValue > prevValue 
            ? "上涨" 
            : currentValue < prevValue 
              ? "下跌" 
              : "持平";
          const changeAmount = Math.abs(currentValue - prevValue);
          return `在${date}，您的金额${changeType}${changeAmount}美元`;
        },
      },
    },
    legend: {
      position: "top",
    },
    title: {
      display: true,
      text: "自定义悬停提示折线图",
    },
  },
};

export default function App() {
  return <Line options={chartOptions} data={chartData} />;
}

关键说明 #

• context.label：直接获取当前数据点对应的X轴标签（即日期）
• context.parsed.y：获取当前数据点的Y轴数值（即金额）
• 涨跌判断逻辑：通过当前数据点索引，对比前一个点的数值，生成对应的涨跌描述
• 若需要基于固定基准值判断涨跌，只需把prevValue替换为你的基准数值即可

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