'chart.js 라인 추가'에 해당되는 글 1건

# 라인 차트에서 데이터셋 , 데이터 제거

# 결과화면

# 데이터 제거 버튼 

// 첫번째 값 제거
document.getElementById('firstRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.shift(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 첫번쨰 배열값 제거
			dataset.data.shift();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

// 마지막 값 제거 
document.getElementById('LastRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.pop(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 마지막 배열값 제거
			dataset.data.pop();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 데이터셋 제거 버튼

document.getElementById('FirstRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 첫번째 그래프 제거
		Chart.instances[elem].config.data.datasets.pop();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

document.getElementById('LastRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 마지막 그래프 제거
		Chart.instances[elem].config.data.datasets.shift();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});