Chart.js柱状图datalabels插件数据标签不显示问题求助

你的问题核心是Chart.js 3.x版本不再自动注册全局插件，你虽然引入了chartjs-plugin-datalabels，但未完成注册步骤，导致插件无法生效，数据标签自然无法显示。

修复步骤 #

1. 注册插件 #

在初始化图表前，添加插件注册代码，有两种方式可选：

• 全局注册：所有图表实例都能使用该插件

Chart.register(ChartDataLabels);

• 单图表注册：仅当前图表启用该插件

push_messages_chart = new Chart(chart_canvas, {
  type: "bar",
  plugins: [ChartDataLabels], // 在此处添加插件注册
  // 其余配置...
});

2. 完整修改后的代码示例 #

JavaScript部分

const data = [
    {
        "date": "2023-02-23",
        "subscribers": 1208123
    },
    {
        "date": "2023-02-22",
        "subscribers": 1045338
    },
    {
        "date": "2023-02-21",
        "subscribers": 1043130
    },
    {
        "date": "2023-02-20",
        "subscribers": 1248035
    },
    {
        "date": "2023-02-19",
        "subscribers": 1243734
    },
    {
        "date": "2023-02-18",
        "subscribers": 1240317
    },
    {
        "date": "2023-02-17",
        "subscribers": 1033439
    },
    {
        "date": "2023-02-16",
        "subscribers": 974864
    }
];
const chart_label = "Number of subscribers";

const chart_canvas = document.getElementById("number_of_messages_delivered").getContext("2d");

// 全局注册datalabels插件
Chart.register(ChartDataLabels);

Chart.defaults.set("plugins.datalabels", {
  color: "#FE777B",
});
push_messages_chart = new Chart(chart_canvas, {
  type: "bar",
  options: {
    animation: true,
    plugins: {
      datalabels: {
        color: "#FFCE56",
        display: true,
        // 可按需添加样式配置，比如调整字体大小
        font: {
          size: 12
        }
      },
    },
  },
  data: {
    labels: data.map((row) => row.date),
    datasets: [
      {
        label: chart_label,
        data: data.map((row) => row.subscribers),
      },
    ],
  },
});

HTML部分（无需修改）

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>

额外说明 #

• 你当前使用的Chart.js 3.0.0与chartjs-plugin-datalabels 2.2.0版本兼容，无需调整版本；
• 若采用模块化开发（如Webpack/Vite），需先通过import导入插件再注册，CDN引入场景直接使用上述代码即可。

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