Javascript bar-chart.js中的文本

我需要使用chart.js将文本写入图表中的条形图

 var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx, {
     type: 'bar',
     data:data,
     options: {           
         scales: {
             yAxes: [{
                 ticks: {
                     beginAtZero:true
                 }
             }]
         }
     },
     responsive : true,
     showTooltips : false,
     showInlineValues : true,
     centeredInllineValues : true,
     tooltipCaretSize : 0,
     tooltipTemplate : "<%= value %>"
 });

var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：数据，
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
},
回答：是的，
showTooltips:false，
showInlineValues:true，
centeredInllineValues：正确，
ToolTiCaretSize:0，
工具脚本模板：“
});

上面的代码不起作用

我需要这样的东西：

你有预约吗

var ctx=document.getElementById（“myChart”）在代码中定义

更新

将此代码添加到选项对象：

animation: {
  onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    console.log(chartInstance);
    var height = chartInstance.controller.boxes[0].bottom;
    ctx.textAlign = "center";
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      Chart.helpers.each(meta.data.forEach(function (bar, index) {
        ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y) / 2));
      }),this)
    }),this);
  }
}


更新2

在画布周围放置一个具有所需宽度和高度的容器

<div style="width: 100%; height: 500px">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

如果要为每个元素渲染居中文本，有一种更简单的方法：

Chart.helpers.each(meta.data.forEach(function (bar, index) {
    var centerPoint = bar.getCenterPoint();
    ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y));
}),this)

似乎“getCenterPoint”在2.1.3版中不可用（您在示例中使用）。我在2.5.0上试用过，它可以正常工作
控制台输出？你是说图表？如果你在谷歌Chrome上，按F12并转到控制台选项卡，查看画布标记的输出是什么？我刚刚更新了答案检查，看是否适合您。鼠标悬停后getCenterPoint会发生更改
Chart.helpers.each(meta.data.forEach(function (bar, index) {
    var centerPoint = bar.getCenterPoint();
    ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y));
}),this)