javascript - 如何在 Chart.js 的水平条中对齐计数文本中心？

Question

我尝试将图表栏值分成一半，但它不起作用!

Code link

Chart.helpers.each(
            meta.data.forEach(function(bar, index) {
              data = dataset.data[index];
              if (i == 0) {
                ctx.fillText(data, bar._model.x/1.6, bar._model.y + 4);
              } else {
                ctx.fillText(data, bar._model.x-25, bar._model.y + 4);
              }
            }),

Answer 1

您可以获得每个水平条的中心位置(在 meta.data 循环内)，如下所示:

var barWidth = bar._model.x - bar._model.base;
var centerX = bar._model.base + barWidth / 2;

得到位置后，相应地绘制计数文本...

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) {
      var data = dataset.data[index];
      var barWidth = bar._model.x - bar._model.base;
      var centerX = bar._model.base + barWidth / 2;
      if (i == 0) {
         ctx.fillText(data, centerX, bar._model.y + 4);
      } else {
         ctx.fillText(data, centerX, bar._model.y + 4);
      }
   }), this);
}), this);

参见 - live demo