728x90
cherrychance.cafe24.com/chartjs.html
chartJS
cherrychance.cafe24.com
참고강좌
www.youtube.com/watch?v=BGAg_rNJCB0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chartJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" integrity="sha512-RGbSeD/jDcZBWNsI1VCvdjcDULuSfWTtIva2ek5FtteXeSjLfXac4kqkDRHVGf1TwsXCAqPTF7/EYITD0/CTqw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<canvas id="myChartOne"></canvas>
</div>
<div class="col-md-6">
<canvas id="myChartTwo"></canvas>
</div>
</div>
</div>
<script>
let myChartOne = document.getElementById('myChartOne').getContext('2d');
let barChart = new Chart(myChartOne, {
type : 'bar',
data : {
labels : ['학원', '연구원', '출판사', '미디어사', '위니브' ],
datasets : [{
label : '바울랩 매출액',
data : [
10,
100,
100,
200,
1000
]
}]
}
});
let myChartTwo = document.getElementById('myChartTwo').getContext('2d');
let barChartTwo = new Chart(myChartTwo, {
type : 'bar',
data : {
labels : ['학원', '연구원', '출판사', '미디어사', '위니브' ],
datasets : [{
label : '바울랩 매출액',
data : [
10,
100,
100,
200,
1000
],
backgroundColor:[
'red',
'blue',
'rgba(255, 255, 30, 0.5)',
'#00FF00',
'skyblue'
],
borderWidth : 4,
borderColor : 'black'
}]
}
})
</script>
</body>
</html>
cherrychance.cafe24.com/chartjs.html
chartJS
cherrychance.cafe24.com
'M64 > FrontEnd' 카테고리의 다른 글
| Nodejs server 설정 - ubuntu on MAC (0) | 2021.04.26 |
|---|---|
| 그누보드 설치 + PHP + Study (0) | 2021.03.28 |