chart.js 라인(Line) 여러 차트에 데이터셋 , 데이터 추가 방법

# 라인 차트 생성 후,  여러 차트에 데이터셋 , 데이터 추가 방법

---

 

 

#결과화면

---

# 데이터셋 추가 버튼

var colorNames = Object.keys(window.chartColors);
// chartColor는 아래 차트 옵션에 정의되어 있음
// 데이터셋 추가 버튼 
document.getElementById('addDataset').addEventListener('click', function () {
	var colorNames = Object.keys(window.chartColors);
	// 새로운 데이터셋 세팅 
	var newData = {
		// 라벨 
		label: 'Dataset',
		// 꼭지점
		backgroundColor: '',
		// 라인색 
		borderColor: '',
		data: [],
	};

	var fill = [
		'end',
		'start', 
		'origin', 
		false 
	];

	for (let index = 0; index < 4; index++) {
		// 데이터 세팅 
		var settingData = JSON.parse(JSON.stringify(newData));
		// 배경
		settingData.backgroundColor = chartColors[colorNames[index + 1]];
		// 선색
		settingData.borderColor = chartColors[colorNames[index + 2]];
		// 라벨
		settingData.label = 'new Data line' + (index + 1) + '/ Fill=' + fill[index];
		// 채우기 옵션
		settingData.fill = fill[index];
		// 데이터 채우기 
		for(var i = 0; i < Chart.instances[0].config.data.datasets[0].data.length; i++){
			settingData.data.push(randomScalingFactor());
		}
		// 데이터 반영 
		Chart.instances[index].data.datasets.push(settingData);
		// 라인 차트 업데이트 
		Chart.instances[index].update();
	}
});

---

# 데이터 추가 버튼

// 데이터 추가 버튼 
document.getElementById('addData').addEventListener('click', function() {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 차트 옵션의 달력 값 지정 
		var month = MONTHS[Chart.instances[elem].config.data.labels.length % MONTHS.length];
		// 차트 키 값  
		// console.log(elem);
		// 달력값 
		// console.log(month);
		// 차트 객체 
		// console.log(Chart.instances[elem]);
		// 차트 객체의 달력값 (라벨 지정)
		Chart.instances[elem].config.data.labels.push(month);
		// 데이터 값 세팅 
		Chart.instances[elem].config.data.datasets.forEach(function(dataset) {
			dataset.data.push(randomScalingFactor());
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

---

# 차트 생성 옵션 

// 차트에 표현할 x 축의 값
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// 차트에 표현할 컬러 
var chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};
var config = {
	type: 'line',
	data: {
		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
		datasets: []
	},
	options: {
		// 컨테이너가 수행 할 때 차트 캔버스의 크기를 조정(dafalut : true)
		responsive: true,
		// 크기 조정 이벤트 후 새 크기로 애니메이션하는 데 걸리는 시간(밀리 초) (defalut : 0)
		responsiveAnimationDuration: 1000,
		// (width / height) 크기를 조정할 떄 원래 캔버스 종횡비를 유지 (defalut : true)
		maintainAspectRatio: true,
		// 캔버스 종횡비( width / height, 정사각형 캔버스를 나타내는 값) 높이가 속성으로 또는 스타일 통해 명시적으로 정의된 경우이 옵션은 무시
		aspectRatio: 2,
		// 크기 조정이 발생할 때 호출
		onResize: function () {
			console.log('onResize');
		},
		title: {
			display: true,
			// 차트 제목 
			text: 'Chart.js Line Chart'
		},
		tooltips: {
			mode: 'index',
			intersect: false,
		},
		hover: {
			mode: 'nearest',
			intersect: true
		},
		scales: {
			x: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			},
			y: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}
		}
	}
};

// -100 ~ 100 사이 랜덤값 생성 
var randomScalingFactor = function () {
	return Math.round(Samples.utils.rand(-100, 100));
};
// 새로운 데이터 만들기 
var datasetSample = {
	label: 'label',
	backgroundColor: window.chartColors.red,
	borderColor: window.chartColors.red,
	data: [
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor()
	],
};

---