我帮你梳理下几个最可能导致这个问题的原因，以及对应的解决办法，你可以逐一排查：

1. 先确认插件和Chart.js的版本兼容性 #

chartjs-plugin-datalabels和Chart.js的版本绑定很严格，比如v2.x的插件只适配Chart.js v2.x系列，v3.x的插件则需要搭配Chart.js v3.x及以上版本。如果版本不匹配，插件根本无法正常工作。你可以去JSFiddle的依赖面板里检查两者的版本是否对应，比如用Chart.js 3.x的话，就得导入v2.x版本的datalabels插件。

2. 别忘了手动注册插件 #

这是很多人容易踩的坑：在Chart.js v3及以上版本中，插件不会自动生效，必须手动注册。你需要在代码开头添加注册语句：

Chart.register(ChartDataLabels);

如果是用Chart.js v2版本，你可以选择全局注册，或者在图表配置里指定插件：

// 全局注册方式
Chart.plugins.register(ChartDataLabels);

// 或者在创建图表时指定
var myChart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  // 其他配置项...
});

3. 检查datalabels的配置层级是否正确 #

确保你把datalabels的配置放在了正确的层级下，而且display: true的设置没有被覆盖。比如在Chart.js v3+中，配置应该放在options.plugins.datalabels下：

var myChart = new Chart(ctx, {
  // 图表类型、数据...
  options: {
    plugins: {
      datalabels: {
        display: true,
        // 可以额外加些样式确保文字能看清，比如颜色、字体
        color: '#333',
        font: {
          weight: 'bold',
          size: 12
        }
      }
    }
  }
});

如果是Chart.js v2版本，插件配置直接在options.plugins下即可。

4. 确认JSFiddle的依赖加载顺序和链接正确性 #

在JSFiddle的“External Resources”里，要先添加Chart.js的CDN链接，再添加datalabels插件的链接——因为插件依赖Chart.js对象，加载顺序错了会导致插件初始化失败。另外也要确认插件的CDN链接是有效的，比如适配Chart.js 3.x的datalabels链接可以用https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js

给你一个完整的可运行示例代码 #

<div class="graph">
  <div class="chart-legend"></div>
  <div class="chart">
    <canvas id="myChart" height="60"></canvas>
  </div>
</div>

// 注册插件（Chart.js 3.x+）
Chart.register(ChartDataLabels);

// 注意：如果用jQuery获取元素，要取DOM对象而不是jQuery对象
var ctx = document.getElementById('myChart');
ctx.height = 100;

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      datalabels: {
        display: true,
        color: '#000',
        font: {
          size: 14,
          weight: 'bold'
        }
      }
    }
  }
});

按照上面的步骤排查调整，应该就能让数值正常显示在图表上了。

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