我从myChart中提取了定义的数据，这样我就可以从数据集中提取最大值。然后在yAxes中，您可以将最大刻度设置为最大值+数据集中的10。这确保了图表中顶部的条形不会超出画布的边缘，也不会显示它们的值。
第一个

最快的方法，我发现这样做是使用这个插件：https://github.com/chartjs/chartjs-plugin-datalabels
只需将插件导入到js文件即可将标签添加到您的图表中，例如：

import 'chartjs-plugin-datalabels'

如果您想在顶部（全局）应用它的值，只需在代码中设置以下选项：

Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';

您可以在此处找到更多选项：https://chartjs-plugin-datalabels.netlify.com/options.html

这里有一个更强大的解决方案，它将在轴高度接近条形高度的情况下，在条形内显示数据点值。换句话说，如果文本将超出画布可见区域，它将在条形上方和/或条形下方显示值。

Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          ctx.fillText(dataset.data[i], model.x, yPos);
        }
      });
    }
  }
});

您可以通过在图表选项中添加below属性来启用图表以使用插件。

showDatapoints: true,

这在我的情况下工作。（下面的插件部分）

options: {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }

快乐编码。

您可以使用在图表内添加一些填充选项

layout: {
    padding: {
        left: 0,
        right: 0,
        top: 30,
        bottom: 0
    }
 },

你可以考虑在每个栏的顶部显示数据值的插件。

plugins: {
afterDatasetsDraw: function (context, easing) {
 var ctx = context.chart.ctx;
   context.data.datasets.forEach(function (dataset) {
     for (var i = 0; i < dataset.data.length; i++) {
        if (dataset.data[i] != 0) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            var textY = model.y + (dataset.type == "line" ? -3 : 15); 
              ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'start';
              ctx.textBaseline = 'middle';
              ctx.fillStyle = dataset.type == "line" ? "black" : "black";
              ctx.save();
              ctx.translate(model.x, textY-15);
              ctx.rotate(4.7);
              ctx.fillText(dataset.data[i], 0, 0);
              ctx.restore();
             }
           }
         });
       }
    }

实时代码：Link

请尝试以下选项：

animation: {
  duration: 1,
  onComplete: function({ chart }) {
    const ctx = chart.ctx;

    chart.config.data.datasets.forEach(function(dataset, i) {
      const meta = chart.getDatasetMeta(i);

      meta.data.forEach(function(bar, index) {
        const data = dataset.data[index];

        ctx.fillText(data, bar.x, bar.y - 5);
      });
    });
  }
}

这在我的情况下工作，但它的显示值在中间的酒吧。

chart.chart.config.options.animation["onComplete"] =  function () {
        var ctx = chart.chart.ctx;
        ctx.font = '22px "Helvetica Neue", Helvetica, Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                    scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                ctx.fillStyle = '#444';
                var y_pos = model.y + 50;
                if ((scale_max - model.y) / scale_max >= 0.5)
                    y_pos = model.y + 20;
                ctx.fillText(dataset.data[i], model.x, y_pos);    
            }
        });                
    }

var ctx = document.getElementById("myChart"); debugger; var data = { labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], datasets: [{ data: [150, 87, 56, 50, 88, 60, 45], backgroundColor: "#4082c4" }] } var myChart = new Chart(ctx, { type: 'bar', data: data, options: { "hover": { "animationDuration": 0 }, "animation": { "duration": 1, "onComplete": function() { var chartInstance = this.chart, ctx = chartInstance.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function(dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); meta.data.forEach(function(bar, index) { var data = dataset.data[index]; ctx.fillText(data, bar._model.x, bar._model.y - 5); }); }); } }, legend: { "display": false }, tooltips: { "enabled": false }, scales: { yAxes: [{ display: false, gridLines: { display: false }, ticks: { max: Math.max(...data.datasets[0].data) + 10, display: false, beginAtZero: true } }], xAxes: [{ gridLines: { display: false }, ticks: { beginAtZero: true } }] } } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>

个月