지난번에 말한 대로 Chart.plugins.register를 이용해서 chart.js의 반도넛 차트 안에 숫자를 적을 수 있다.

방법은 다음과 같은 소스를 도넛 차트를 그리는 js에 넣고 도넛 차트 옵션에 elements.center를 만들면 된다.

(이전 포스팅 참조 : chart.js에서 반도넛 그래프 그리는 법)

Chart.plugins.register({
  beforeDraw: function (chart) {
	  if (chart.config.options.elements.center) {
	      //Get ctx from string
	      var ctx = chart.chart.ctx;

	      //Get options from the center object in options
	      var centerConfig = chart.config.options.elements.center;
	      var fontSize = centerConfig.fontSize || '50';
	      var fontStyle = centerConfig.fontStyle || 'Arial';
	      var txt = centerConfig.text;
	      var color = centerConfig.color || '#000';
	      var sidePadding = centerConfig.sidePadding || 20;
	      var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
	      //Start with a base font of 30px
	      ctx.font = fontSize + "px " + fontStyle;

	      //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
	      var stringWidth = ctx.measureText(txt).width;
	      var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

	      // Find out how much the font can grow in width.
	      var widthRatio = elementWidth / stringWidth;
	      var newFontSize = Math.floor(30 * widthRatio);
	      var elementHeight = (chart.innerRadius * 0.7);

	      // Pick a new font size so it will not be larger than the height of label.
	      var fontSizeToUse = Math.min(newFontSize, elementHeight);

	      //Set font settings to draw it correctly.
	      ctx.textAlign = 'center';
	      ctx.textBaseline = 'middle';
	      var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
	      var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);

	      //반도넛일 경우
	      if (chart.config.options.rotation === Math.PI && chart.config.options.circumference === Math.PI) {
	        centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 1.3);
	      }
	      ctx.font = fontSizeToUse+"px " + fontStyle;
	      ctx.fillStyle = color;

	      //Draw text in center
	      ctx.fillText(txt, centerX, centerY);
	    }
  }
});

만약 숫자가 너무 올라가있거나 내려가 있으면 38번 줄의 수식을 변경해주면 된다.

출처 : https://stackoverflow.com/questions/20966817/how-to-add-text-inside-the-doughnut-chart-using-chart-js

Chart.js에서 반도넛(Half Donuts) 그래프를 그리는 법은 그냥 도넛 차트 옵션에

아래와 같이 rotation: 1 * Math.PI, circumference: 1 * Math.PI를 추가해주면 된다.

<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" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
<script type="text/javascript"> 
var num = Math.random(); 
	var data = { 
		labels: [ 
			"pink" 
		], 
		datasets: [ 
			{ 
				data: [num, 1-num], 
				backgroundColor: [ 
					"#FF6384"
 				], 
				hoverBackgroundColor: [ 
					"#FF6384" 
				] 
			}] 
		}; 
	window.onload = function() { 
		var ctx8 = $('#chart8').get(0).getContext("2d"); 
		window.theChart8 = new Chart(ctx8, { 
			type: 'doughnut', 
			data: data, 
			options: { 
				responsive: true, 
				legend: { 
					display: false 
				}, 
				elements: { 
					center: { 
						text: Math.round(num*100), 
						fontStyle: 'Helvetica', //Default Arial 
						sidePadding: 15 //Default 20 (as a percentage) 
					}
				}, 
				maintainAspectRatio : false, 
				cutoutPercentage:70, 
				animation:false, 
				rotation: 1 * Math.PI, 
				circumference: 1 * Math.PI 
			} 
		}); 
</script> 
<div style="width:150px"> 
	<canvas id="chart8"></canvas> 
</div>

그리고 다음과 같이 가운데에다 숫자를 적고 싶게 될 수 있는데 

그것은 Chart.plugins.register를 사용해야 하므로 다음 포스팅에서 설명하겠다.

(위의 옵션에서 elements안의 center가 Chart.plugins.register를 이용해서 만든 옵션이다) 

출처 : https://laracasts.com/discuss/channels/general-discussion/chartjs-and-half-donuts