疊加條形圖上的數據標籤

Question

https://github.com/chartjs/Chart.js/blob/master/samples/data_label_combo-bar-line.html顯示瞭如何在簡單條形圖中添加數據標籤，該條形圖顯示條形圖代表的編號。這可以通過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