Chart.js에서 그래프 위에 값 그리는 법

chart.js에서 그래프 위에 값 그리는 법도 역시 Chart.plugins.register를 확장해서 아래와 같이 사용한다.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script type="text/javascript">
Chart.plugins.register({
  afterDraw: function (chart, easing) {
    if (chart.config.options.showValue) {
        var ctx = chart.chart.ctx;
        var fontSize = chart.config.options.showValue.fontSize || "9";
        var fontStyle = chart.config.options.showValue.fontStyle || "Arial";
        ctx.font =  fontSize + "px " + fontStyle;
        ctx.textAlign = chart.config.options.showValue.textAlign || "center";
        ctx.textBaseline = chart.config.options.showValue.textAlign || "bottom";
	
        chart.config.data.datasets.forEach(function (dataset, i) {
            ctx.fillStyle = dataset.fontColor || chart.config.options.showValue.textColor || "#000";
            dataset.data.forEach(function (data, j) {
               if(dataset.hideValue != true){
                	var txt = Math.round(data*100)/100;
                	var xCoordinate = dataset._meta[chart.id].data[j]._model.x;
                	var yCoordinate = dataset._meta[chart.id].data[j]._model.y;
                	var yCoordinateResult;

                	if(dataset.type == 'line'){
                		yCoordinateResult = yCoordinate + 21 > chart.scales[chart.options.scales.xAxes[0].id].top ? chart.scales[chart.options.scales.xAxes[0].id].top :  yCoordinate + 21;
                	} else{
                		yCoordinateResult = yCoordinate - 10;
                	}
                	ctx.fillText(txt, xCoordinate, yCoordinateResult);
                }
             });
          });
        }
      }
    }
});

var barChartData = {
        labels: ["label1", "label2", "label3", "label4"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            data: [
                Math.random(),
                Math.random(),
                Math.random(),
                Math.random()
            ]
      }]
};
	
window.onload = function() {
	var ctx5 = $('#chart5').get(0).getContext("2d");
	window.theChart5 = new Chart(ctx5, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                	display: false
                },
                scales: {
                	xAxes: [{
                		  gridLines: {
                		    display: false
                		  },
                		}],
	                yAxes: [{
	                	gridLines: {
                		    drawBorder: false//축과 데이터의 경계선 표시 여부
                		  },
	                    ticks: {
	                    	display: false,//축의 값 표시 여부
	                        max: 1,
	                        min: 0
	                    }
	                  }]
                },
                animation:false,
                showValue:{
                fontStyle: 'Helvetica', //Default Arial
                fontSize: 20
	     }
       }
 });
</script>
<div>
	<canvas id="chart5"></canvas>
</div>