Paretoチャートの値をChart.js 2.0.2を使用して表示する

Question

私はParetoチャート（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

これは私が（optionsオブジェクトのみで）開発された答えは次のとおりです。

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

そして、これが結果です：