챠트 chartjs 를 이용한 실시간 그래프 만들기
페이지 정보
본문
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>테스트</title>
<link rel="stylesheet" href="/resource/js/fontawesome-5.13.0/css/all.min.css">
<link rel="stylesheet" href="/resource/js/bootstrap-4.5.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/resource/js/chartjs-2.9.3/web/chart.min.css">
<link rel="stylesheet" href="/resource/js/jquery-easyui-1.9.5/themes/gray/easyui.css">
<link rel="stylesheet" href="/resource/js/jquery-easyui-1.9.5/themes/icon.css">
<script src="/resource/js/jquery-3.5.1.js"></script>
<script src="/resource/js/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
<script src="/resource/js/chartjs-2.9.3/web/chart.min.js"></script>
<script src="/resource/js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
<script src="/resource/js/iot.js"></script>
<style>
* {padding:0px;margin:0px;}
</style>
</head>
<body>
<div>
<canvas id="chartView" width="100%" height="">aaa</canvas>
</div>
<script>
//var ctx = document.getElementById('myChart');
var ctx = $("#chartView");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill:false,
borderColor: '#999',
borderWidth: 1
},{
label: '# of Votes',
data: [22, 39, 13, 25, 32, 53],
fill:false,
borderColor: '#F30',
borderWidth: 1
},{
label: '# of Votes',
data: [12, 19, 33, 55, 22, 33],
fill:false,
borderColor: '#03f',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
function addData(chart, label, data) { // 챠트에 데이타 추가하기
chart.data.datasets.forEach((dataset) => {
dataset.data.splice(0,1); // 끝에 데이타 추가
dataset.data.push(data); // 첫번째 데이타 삭제
});
chart.data.labels.push(label); // x축 레벨 추가
chart.data.labels.splice(0,1); // x축 레벨 삭제
chart.update();
}
function removeData(chart) { // 챠트에 데이타 삭제하기
chart.data.datasets.forEach((dataset) => {
//dataset.data.pop(); // 마지막 데이타 제거
dataset.data.splice(0,1); // 첫번째 데이타 제거
});
//chart.data.labels.pop(); // 마지막 데이타 제거
chart.data.labels.splice(0,1); // 첫번째 데이타 제거
chart.update();
}
function func_run() {
var tmp = Math.random() * 100;
addData(myChart, "추가1", tmp);
}
function func_run_del() {
removeData(myChart);
}
var timeID = setInterval(func_run, 1000); // 맨끝에 데이타 추가 / 첫번째 데이타 삭제
//var timeID = setInterval(func_run_del, 1000); // 삭제
setTimeout(() => { clearInterval(timeID); alert('stop'); }, 50000); // 10초후에 정지
</script>
</body>
</html>
===================================================================================
x, y 축 글씨색깔, 라인 보이기 안보이기 옵션 지정시 참고
글자색깔과 크기로 x,y축 이름을 안보이게 할 수 있음
}, options: {
legend:{
display:false,
}, scales: {
xAxes: [{
gridLines: {
display: true,
},
ticks: {
fontSize: 0,
fontColor: '#999'
}
}],
yAxes: [{
gridLines:{
drawBorder:false,
display: true,
}, ticks: {
beginAtZero: true,
fontSize: 0,
fontColor: '#999',
maxTicksLimit: 5,
padding: 10,
}
}]
}
}
- 이전글datagrid 키보드로 움직이기 21.09.14
- 다음글오른쪽 배너 스크롤시 따라 다니기 20.06.30
댓글목록
등록된 댓글이 없습니다.