React中Chart.js折线图数据点标签显示问题求助

Chart.js核心库默认不提供数据点标签显示功能，需要使用官方维护的chartjs-plugin-datalabels插件实现该需求，具体步骤如下：

步骤1：安装插件 #

在项目终端执行安装命令：

npm install chartjs-plugin-datalabels
# 或使用yarn
yarn add chartjs-plugin-datalabels

步骤2：修改代码实现标签显示 #

• 导入并注册插件
• 移除dataset中无效的scales配置（该配置属于全局options范畴，写在dataset内不生效）
• 在options的plugins中添加数据标签的自定义配置

修改后的完整代码：

import React, { useEffect, useRef } from "react";
import Chart from "chart.js/auto";
import ChartDataLabels from 'chartjs-plugin-datalabels'; // 导入插件

// 全局注册插件，也可在创建图表时单独声明
Chart.register(ChartDataLabels);

const MainEfficiencyChart = (props) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext("2d");

    const data = {
      labels: props.labels,
      datasets: [
        {
          label: "Efficiency",
          borderColor: "rgb(75, 192, 192)",
          data: props.data.efficiency,
          yAxisID: "y-axis-1",
        },
        {
          label: "M/H Time",
          borderColor: "rgb(255, 99, 132)",
          data: props.data.time,
          yAxisID: "y-axis-2",
        },
        {
          label: "Operators",
          borderColor: "rgb(91,244,10)",
          data: props.data.operators,
          yAxisID: "y-axis-3",
        },
      ],
    };

    const options = {
      scales: {
        x: {
          type: "category",
          ticks: {
            color: "white",
            font: {
              size: 16,
            },
          },
        },
        "y-axis-1": {
          type: "linear",
          position: "left",
          ticks: {
            color: "white",
            font: {
              size: 16,
            },
          },
          grid: {
            color: "rgb(197,191,136)",
            borderDash: [5, 5],
          },
        },
        "y-axis-2": {
          type: "linear",
          position: "right",
          ticks: {
            color: "white",
            font: {
              size: 16,
            },
          },
        },
        "y-axis-3": {
          type: "linear",
          position: "left",
          ticks: {
            color: "white",
            font: {
              size: 16,
            },
          },
        },
      },
      plugins: {
        legend: {
          labels: {
            color: "white",
            font: {
              size: 16,
            },
          },
        },
        // 配置数据标签
        datalabels: {
          display: true,
          color: 'white',
          font: {
            size: 14,
            weight: 'bold'
          },
          anchor: 'top', // 标签定位在数据点上方
          align: 'center',
          formatter: (value) => {
            // 可自定义标签格式，比如保留两位小数：return value.toFixed(2)
            return value;
          }
        }
      },
    };

    const myChart = new Chart(ctx, {
      type: "line",
      data: data,
      options: options,
    });

    return () => {
      myChart.destroy();
    };
  }, [props.labels, props.data]); // 添加props依赖，保证数据更新时图表重新渲染

  return (
    <div>
      <canvas ref={chartRef} width="200" height="100"></canvas>
    </div>
  );
};

export default MainEfficiencyChart;

关键说明 #

1. 原代码中dataset内的scales配置无效，该配置需放在全局options中。
2. 可通过datalabels配置项自由调整标签的颜色、字体、位置、显示格式。
3. 必须在useEffect的依赖数组中添加props.labels和props.data，否则数据更新时图表不会同步刷新。

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