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