如何在Chart.js中的水平欄中對齊計數文本中心？

Question

我嘗試將圖形欄的值分成一半，但沒有用！

代碼鏈接

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

看- 現場演示