使用Chart.js在Pareto圖表中顯示值2.0.2

Question

我有一個帕累託圖表（使用Chart.js版本：2.0.2），我需要顯示欄內和欄內的值。

任何幫助將是非常讚賞：

這是代碼（希望它爲別人有用）：

<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
    var data = { 
     labels: ["8","7","9","11","10"], 
     datasets: [{ 
      type: "line", 
      label: "Acumulado", 
      borderColor: "#BA1E14", 
      backgroundColor: "#BA1E14", 
      pointBorderWidth: 5, 
      fill: false, 
      data: [34.04,57.45,76.60,89.36,100.00], 
      yAxisID: 'y-axis-2' 
     },{ 
      type: "bar", 
      label: "Asistencia", 
      borderColor: "#56B513", 
      backgroundColor: "#56B513", 
      data: [16,11,9,6,5], 
      yAxisID: 'y-axis-1' 
     },{ 
      type: "bar", 
      label: "Solución", 
      borderColor: "#000FAA", 
      backgroundColor: "#000FAA", 
      data: [16,11,9,6,5], 
      yAxisID: 'y-axis-1' 
     }] 
    }; 

    var options = { 
     scales: { 
      xAxes: [{ 
       stacked: true, 
       scaleLabel: { 
        display: true, 
        labelString: "Estaciones" 
       } 
      }], 

      yAxes: [{ 
       type: "linear", 
       position: "left", 
       id: "y-axis-1", 
       stacked: true, 
       ticks: { 
        suggestedMin: 0 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: "Minutos" 
       } 
      },{ 
       type: "linear", 
       position: "right", 
       id: "y-axis-2", 
       ticks: { 
        suggestedMin: 0, 
        callback: function(value) { 
         return value + "%"; 
        } 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: "Porcentaje" 
       } 
      }] 
     } 
    }; 

    window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 

     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: data, 
      options: options 
     }); 
    }; 
</script> 

眼下圖表看起來是這樣的： ，我需要它看起來像這樣：

Answer 1

這是我開發的答案（只在選項對象中）：

var options = { 
    animation: { 
     onComplete: function() { 
      var ctx = this.chart.ctx; 
      ctx.textAlign = "center"; 
      ctx.textBaseline = "middle"; 

      this.chart.config.data.datasets.forEach(function(dataset) { 
       ctx.font = "20px Arial"; 
       switch (dataset.type) { 
        case "line": 
         ctx.fillStyle = "Black"; 
         dataset.metaData.forEach(function(p) { 
          ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 20); 
         }); 
         break; 
        case "bar": 
         ctx.fillStyle = "White"; 
         dataset.metaData.forEach(function(p) { 
          ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y + 20); 
         }); 
         break; 
       } 
      }); 
     } 
    } 
... 
}; 

這是結果：