데이터 막대 위에 막대 그래프

Question

는 막대가 나타내는 숫자를 표시하는 간단한 막 대형 차트 위에 데이터 레이블을 추가하는 방법을 보여줍니다. charts.js에 누적 막 대형 차트를 사용하면 어떻게 될까요?

Answer 1

이 다음 옵션을 사용하여 수행 할 수 있습니다 :

animation: 
{ 
    onComplete: function() 
    { 
    var chartInstance = this.chart; 
    var horizontal = chartInstance.config.type.lastIndexOf("horizontal", 0) === 0; //if type of graph starts with horizontal 

    var ctx = chartInstance.ctx; 
    ctx.textAlign = (horizontal) ? "left" : "center"; 
    ctx.textBaseline = (horizontal) ? "middle" : "bottom"; 
    ctx.font = '16px "Helvetica Neue", Helvetica, Arial, sans-serif'; 
    ctx.fillStyle = "#000"; 

    var dataLabels = {}; //key = x or y coordinate (depends on grouping), value = Array[0] other coordinate , Array[1] = value to print 
    var equationForGrouping = (horizontal) ? Math.max : Math.min; //equation to use for grouping 

    //get values from chart, fill them in dataLabels (as seen in https://github.com/chartjs/Chart.js/blob/master/samples/data_label_combo-bar-line.html) 
    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) 
     { //for each part of each stacked bar 
     if(meta.hidden != true) //if data is not hidden (by clicking on it in the legend) 
     { 
      var groupByCoordinate = (horizontal) ? bar._model.y : bar._model.x; 
      var otherCoordinate = (horizontal) ? bar._model.x : bar._model.y; 

      if(dataLabels[groupByCoordinate]) 
      { 
      dataLabels[groupByCoordinate][0] = equationForGrouping(otherCoordinate, dataLabels[groupByCoordinate][0]); 
      dataLabels[groupByCoordinate][1] += dataset.data[index]; 
      } 
      else 
      dataLabels[groupByCoordinate] = [otherCoordinate, dataset.data[index]]; 
      } 
     }), this) 
     }), this); 

     //draw values onto graph 
     for(var key in dataLabels) 
     { 
     if(dataLabels[key][1] >= 1000000) //million 
      dataLabels[key][1] = Math.round(dataLabels[key][1]/1000000) + "m"; 
     else if(dataLabels[key][1] >= 1000) //thousand 
      dataLabels[key][1] = Math.round(dataLabels[key][1]/1000) + "k"; 

     if(horizontal) //if grouped by y values 
      ctx.fillText(dataLabels[key][1], dataLabels[key][0], key); 
     else 
      ctx.fillText(dataLabels[key][1], key, dataLabels[key][0]); 
     } 
    } 
    } 
}; 

이 예제를 참조하십시오 : https://jsfiddle.net/s4r2rj8h/1

이 년 반 지났 이후