본문 바로가기
프로그래밍/Chart JS

Chart.js 데이터 추가/ 데이터 삭제/ 데이터셋 추가/ 데이터셋 삭제 / 데이터 변경

by 밍구몬 2019. 7. 30.

 

 

 

 

우선 Chart를 조작 하기 위하여 차트를 그려준다.

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.js</title>
<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
	<div class="chart-container" style="position: relative; height:200px; width:60vw">
		<canvas id="myChart"></canvas>
	</div>
	<button type="button" id="reData">데이터 변경</button>
	<button type="button" id="addData">데이터 추가</button>
	<button type="button" id="addDataSet">데이터셋 추가</button>
	<button type="button" id="delData">데이터 삭제</button>
	<button type="button" id="addDataSet">데이터셋 삭제</button>


  <script>
	var ctx = document.getElementById('myChart');
	  
	var config = {
		type: 'line',
		data: {
			labels: [ // Date Objects
				'data1',
				'data2',
				'data3',
				'data4',
				'data5',
				'data6',
				'data7'
			],
			datasets: [{
				label: 'My First dataset',
				backgroundColor: 'rgba(75, 192, 192, 1)',
				borderColor: 'rgba(75, 192, 192, 1)',
				fill: false,
				data: [
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50)
				],
			}, {
				label: 'My Second dataset',
				backgroundColor: 'rgba(255, 99, 132, 1)',
				borderColor: 'rgba(255, 99, 132, 1)',
				fill: false,
				data: [
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50)
				],
			}]
		},
		options: {
			maintainAspectRatio: false,
			title: {
				text: 'Chart.js Time Scale'
			},
			scales: {
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: '차트'
					}
				}]
			},
		}
	};
	 
	//차트 그리기
	var myChart = new Chart(ctx, config);
</script>

 

데이터 변경

	//데이터 변경
	document.getElementById('reData').onclick = function(){
		
		//데이터셋 수 만큼 반복
		var dataset = config.data.datasets;
		for(var i=0; i<dataset.length; i++){
			console.log(dataset);
			//데이터 갯수 만큼 반복
			var data = dataset[i].data;
			for(var j=0 ; j < data.length ; j++){
				data[j] = Math.floor(Math.random() * 50);
			}
		}
		
		myChart.update();	//차트 업데이트
	}

reData버튼에 클릭 이벤트를 작성하였다.

버튼이 클릭 되었을 때 데이터셋의 데이터 수 만큼 for문을 반복하여 값을 변경해 주었다.

값을 변경해 준 뒤에는 반영이 되도록 반드시 update를 해주어야 한다.

 

데이터 추가

	//데이터 추가
	document.getElementById('addData').onclick = function(){
		
		//라벨추가
		config.data.labels.push('data'+config.data.labels.length)
		
		//데이터셋 수 만큼 반복
		var dataset = config.data.datasets;
		for(var i=0; i<dataset.length; i++){
			//데이터셋의 데이터 추가
			dataset[i].data.push(Math.floor(Math.random() * 50));
		}
		myChart.update();	//차트 업데이트
	}

데이터를 추가하기 위해서는 라벨도 같이 추가해 주어야 한다.

라벨을 push하고 데이터셋마다 데이터를 한개씩 추가해 주었다.

데이터셋 추가

	//데이터셋 추가
	document.getElementById('addDataSet').onclick = function(){
		var color1 = Math.floor(Math.random() * 256);
		var color2 = Math.floor(Math.random() * 256);
		var color3 = Math.floor(Math.random() * 256);
		
		console.log(color1 + " " + color2 + " " + color3)
		
		var newDataset = {
			label: 'new Dataset'+config.data.datasets.length,
			borderColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
			backgroundColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
			data: [],
			fill: false
		}
		
		// newDataset에 데이터 삽입
		for (var i=0; i< config.data.labels.length; i++){
			var num = Math.floor(Math.random() * 50);
			newDataset.data.push(num);
		}
		
		// chart에 newDataset 푸쉬
		config.data.datasets.push(newDataset);
		
		myChart.update();	//차트 업데이트
	}

데이터셋은 config에 있는 데이터셋처럼 하나 더 만들어 chart에 넣어주고 업데이트를 해주면 된다.

데이터 삭제

	//데이터 삭제
	document.getElementById('delData').onclick = function(){
		
		config.data.labels.splice(-1,1);//라벨 삭제
		
		//데이터 삭제
		config.data.datasets.forEach(function(dataset) {
			dataset.data.pop();
		});
		
		myChart.update();	//차트 업데이트
	}

데이터셋의 데이터를 하나씩 지우기 때문에 라벨도 같이 지워 주었다.

 

데이터셋 삭제

	//데이터셋 삭제
	document.getElementById('delDataset').onclick = function(){
		config.data.datasets.splice(-1,1);
		myChart.update();	//차트 업데이트
	}

데이터셋은 splice를 이용하여 지웠다.

첫 번째 파라미터에 -1을 넣게 되면 마지막 데이터가 선택 된다.

 

 

전체 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.js</title>
<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
	<div class="chart-container" style="position: relative; height:200px; width:60vw">
		<canvas id="myChart"></canvas>
	</div>
	<button type="button" id="reData">데이터 변경</button>
	<button type="button" id="addData">데이터 추가</button>
	<button type="button" id="addDataSet">데이터셋 추가</button>
	<button type="button" id="delData">데이터 삭제</button>
	<button type="button" id="delDataset">데이터셋 삭제</button>


  <script>
	var ctx = document.getElementById('myChart');
	  
	var config = {
		type: 'line',
		data: {
			labels: [ // Date Objects
				'data1',
				'data2',
				'data3',
				'data4',
				'data5',
				'data6',
				'data7'
			],
			datasets: [{
				label: 'My First dataset',
				backgroundColor: 'rgba(75, 192, 192, 1)',
				borderColor: 'rgba(75, 192, 192, 1)',
				fill: false,
				data: [
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50)
				],
			}, {
				label: 'My Second dataset',
				backgroundColor: 'rgba(255, 99, 132, 1)',
				borderColor: 'rgba(255, 99, 132, 1)',
				fill: false,
				data: [
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50),
					Math.floor(Math.random() * 50)
				],
			}]
		},
		options: {
			maintainAspectRatio: false,
			title: {
				text: 'Chart.js Time Scale'
			},
			scales: {
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: '차트'
					}
				}]
			},
		}
	};
	 
	//차트 그리기
	var myChart = new Chart(ctx, config);
	  
	//데이터 변경
	document.getElementById('reData').onclick = function(){
		
		//데이터셋 수 만큼 반복
		var dataset = config.data.datasets;
		for(var i=0; i<dataset.length; i++){
			console.log(dataset);
			//데이터 갯수 만큼 반복
			var data = dataset[i].data;
			for(var j=0 ; j < data.length ; j++){
				data[j] = Math.floor(Math.random() * 50);
			}
		}
		
		myChart.update();	//차트 업데이트
	}
	
	//데이터 추가
	document.getElementById('addData').onclick = function(){
		
		//라벨추가
		config.data.labels.push('data'+config.data.labels.length)
		
		//데이터셋 수 만큼 반복
		var dataset = config.data.datasets;
		for(var i=0; i<dataset.length; i++){
			//데이터셋의 데이터 추가
			dataset[i].data.push(Math.floor(Math.random() * 50));
		}
		myChart.update();	//차트 업데이트
	}
	
	//데이터셋 추가
	document.getElementById('addDataSet').onclick = function(){
		var color1 = Math.floor(Math.random() * 256);
		var color2 = Math.floor(Math.random() * 256);
		var color3 = Math.floor(Math.random() * 256);
		
		console.log(color1 + " " + color2 + " " + color3)
		
		var newDataset = {
			label: 'new Dataset'+config.data.datasets.length,
			borderColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
			backgroundColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
			data: [],
			fill: false
		}
		
		// newDataset에 데이터 삽입
		for (var i=0; i< config.data.labels.length; i++){
			var num = Math.floor(Math.random() * 50);
			newDataset.data.push(num);
		}
		
		// chart에 newDataset 푸쉬
		config.data.datasets.push(newDataset);
		
		myChart.update();	//차트 업데이트
	}
	
	//데이터 삭제
	document.getElementById('delData').onclick = function(){
		
		config.data.labels.splice(-1,1);//라벨 삭제
		
		//데이터 삭제
		config.data.datasets.forEach(function(dataset) {
			dataset.data.pop();
		});
		
		myChart.update();	//차트 업데이트
	}
	
	//데이터셋 삭제
	document.getElementById('delDataset').onclick = function(){
		config.data.datasets.splice(-1,1);
		myChart.update();	//차트 업데이트
	}
	
  </script>
</body>
저작자표시 비영리

'프로그래밍 > Chart JS' 카테고리의 다른 글

[Chart.js] y축 데이터 범위 설정  (5) 2019.08.21
Chart.js 데이터 항상 보이게 설정  (5) 2019.08.21
Chart.js 배경, 폰트, 라인, 라벨 색상 변경  (2) 2019.08.21
chart.js 크기 조정 / 사이즈 조정  (0) 2019.07.25
Chart.js CDN / chart.js 다운로드 / chart.js 사용 예제  (0) 2019.07.25

관련글

티스토리툴바