프로그래밍/Chart JS
Chart.js 데이터 추가/ 데이터 삭제/ 데이터셋 추가/ 데이터셋 삭제 / 데이터 변경
밍구몬
2019. 7. 30. 14:15
우선 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>