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

Question

我尝试将图形条值分成一半，但它不起作用！

Code link

＆＃13;

＆＃13;

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);
              }
            }),

＆＃13;

＆＃13;

＆＃13;

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