[JS] 실무 - chart.js 활용해서 그래프 만들어보기 - 개발자 배찌

해당 월에 해당하는 실 주유량, 추정주유량 을
종류별 주유량 (휘발유, 경유, LPG)으로 차트를 만들어야 했다.

참고 이미지!!

가장 힘들었던 부분..
해당 월에 막대그래프가 2중으로 두개 그려져야하는 부분..
툴팁으로 data를 막대그래프에 맞게 띄우는부분이 힘들었다.

구현해보기!!

<canvas id=“chart01”>
<script>
var myChart01 =‘’;

var month = [];

var realOilGList = [];
var realOilDList = [];
var realOilLList = [];

var esmOilGList = [];
var esmOilDList = [];
var realOilLList = [];



function setChart(month, realOilGList, realOilDList, RealOilLList, esmOilGList, esmOilDList, esmOilLList){
	var canvas01 = document.getElementById(‘chart01’);
	var ctx01 = canvas01.getContext(‘2d’);
	if(myChart01) {
		myChart01.destroy();   //이걸 안해주면 selectbox로 검색조건이 달라지면서 차트를 다시그릴때 이중으로 그려지기때문에, 한번 지워줘야함!	
	}
	myChart01 = new Chart(ctx02, {
		type: ‘bar’,
		data: {
			labels: month,  //month에 [‘4월’, ‘5월’, ‘’6월, ‘7월’] 이렇게들어감
			datasets: [
				{
					lable: ‘실주유-휘발유’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
				 {
					lable: ‘실주유-경유’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
				{
					lable: ‘실주유-LPG’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
				{
					lable: ‘추정주유-휘발유’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
				{
					lable: ‘추정주유-경유’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
				{
					lable: ‘추정주유-LPG’
					data: realOilGList // [‘70’, ’100’, ’55’, ’20’] 이렇게들어감
					barThickness: 5,
				},
			]
		},
		options: {
			scales: {
				xAxes: [{
					stacked: false,
					gridLines: {
						lineWidth: 0,
						display: false,
					},
					ticks: {
						fontColor: ‘#8e939d’,
						borderColor: ‘#000’
					},
					offset: true,
				}],
				yAxes: [{
					stacked: true,
					gridLines: {
						lineWidth: 0,
					},
					ticks: {
						display:false,
					}
				}]
			},
			legend: {
				display:false,
				position: ’bottom’,
				labels {
					boxWIdth: 4,
					boxHeight: 4,
					usePointStyle: true,
					fontSze: 11
				},
				onClickL function(){
					return;
				},
				tooltips: {
					mode: ‘x’
					callbacks: {
						title: function(tooltipItem, data){
							var sum = 0;
							var temp.= 0;
							var label = ‘’;
							for(var i = 0; i < tooltipItem.length; i++){
								var item = tooltipItem[i];
								label = item.label;
								if(item.datasetIndex == 0){
									temp = item.x;
								} else if(item.datasetIndex == 3) {
									temp = item.x;
								}

								if(temp == item.x){
									sum += item.yLabel;
								} else {
									break;
								}
							}
							return label + ‘ 총 ’ + sum;
						}
					},
				backgroundColor: ‘#fff’,
				titleFontColor: ‘#616770’,
				titleFontFamily: ‘YouaniModernTB’,
				titleFontSize: 10,
				bodyFontColor: ‘#61670’,
				bodyFontSIze: 10,
				bodyFontFamily:’YouaniModernTB’,
				cornerRadius: 6,		
			},
			maintainAspectRatio: false,
		}
});
}
</script>

function setChart(){