Javascript ChartJS-在每个条的中心显示值

如下图所示，我正在尝试设置堆叠条中心每个条的值；到目前为止，我只在顶部，有时位置是关闭的（见第三栏中的4%黄色）

代码如下：

context.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;
        var textY = model.y + 50;
        if ((scale_max - model.y) / scale_max >= 0.5)
            textY = model.y + 20;
        fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
    }
});

var fadeIn = function(ctx, obj, x, y, black, step) {
    var ctx = modifyCtx(ctx);
    var alpha = 0;
    ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
    ctx.fillText(obj.toString() + "%", x, y);
};

context.data.datasets.forEach（函数（数据集）{
对于（var i=0；i=0.5）
textY=model.y+20；
fadeIn（ctx，dataset.data[i]，model.x，textY，model.y>topThreshold，step）；
}
});
var fadeIn=功能（ctx、obj、x、y、黑色、阶跃）{
var ctx=修正ctx（ctx）；
varα=0；
ctx.fillStyle=黑色？'rgba（'+outsideFontColor+'，'+step+'）：'rgba（'+insideFontColor+'，'+step+'）；
ctx.fillText（obj.toString（）+“%”，x，y）；
};

这可以通过。API提供了不同的钩子，可用于执行自定义代码（这可能是您已经做过的）。在本例中，您可以使用如下所示的

afterDraw

钩子在所需位置绘制文本

afterDraw: chart => {
  let ctx = chart.chart.ctx;
  ctx.save();
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = "12px Arial";
  let xAxis = chart.scales['x-axis-0'];
  let yAxis = chart.scales['y-axis-0'];
  let datasets = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden);
  xAxis.ticks.forEach((value, xIndex) => {
    let x = xAxis.getPixelForTick(xIndex);
    datasets.forEach((dataset, iDataset) => {
      if (dataset.data[xIndex] > 3) {
        let yValue = datasets.slice(0, iDataset)
          .map(ds => ds.data[xIndex])
          .reduce((a, b) => a + b, 0) +
          dataset.data[xIndex] / 2;
        let y = yAxis.getPixelForValue(yValue);
        ctx.fillStyle = dataset.textColor;
        ctx.fillText(dataset.data[xIndex] + '%', x, y);
      }
    });
  });
  ctx.restore();
}

请看下面的可运行代码，看看它是如何工作的

const chart=新图表（'myChart'{
类型：'bar'，
插件：[{
后置绘图：图表=>{
设ctx=chart.chart.ctx；
ctx.save（）；
ctx.textAlign='中心'；
ctx.textb基线='中间'；
ctx.font=“12px Arial”；
设xAxis=图表。比例['x轴-0']；
设yAxis=图表刻度['y轴-0']；
让datasets=chart.chart.data.datasets.filter（ds=>！ds.\u meta[0]。隐藏）；
xAxis.ticks.forEach（（值，xIndex）=>{
设x=xAxis.getPixelForTick（xIndex）；
datasets.forEach（（数据集，iDataset）=>{
if（dataset.data[xIndex]>3）{
设yValue=datasets.slice（0，iDataset）
.map（ds=>ds.data[xIndex]）
.减少（（a，b）=>a+b，0）+
dataset.data[xIndex]/2；
设y=yAxis.getPixelForValue（yValue）；
ctx.fillStyle=dataset.textColor；
ctx.fillText（dataset.data[xIndex]+'%'，x，y）；
}
});
});
ctx.restore（）；
}
}],
数据：{
标签：['A'，'B'，'C'，'D'，'E']，
数据集：[{
标签：“数据集1”，
数据：[2.5,48,9,17,23]，
背景颜色：“红色”，
textColor:“白色”
}, {
标签：“数据集2”，
数据：[2.5,4,4,11,11]，
背景颜色：“橙色”，
textColor:'黑色'
}, {
标签：“数据集3”，
数据：[95,48,87,72,66]，
背景颜色：“绿色”，
textColor:“白色”
}]
},
选项：{
比例：{
xAxes：[{
是的
}],
雅克斯：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

您想将文本放在整个条的中心（即几乎像第二条）或其特定条的中心（即几乎像第四条的黄色和红色）？@adelriosantiago我想将文本放在每个特定条的中心（颜色）；是的，第四条看起来就像我想要的你能加一条吗？我已经试过好几次了，但是我不能使用你上面发布的功能。您可以将其用作起点。