wiki:chartjs:chart_js_sample01
Chart JS Sample01
- description : Sass Introduction
- author : 오션
- email : shlim@repia.com
- lastupdate : 2022-12-16 Fri
Sample 01-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<title>Chart JS Test #01</title>
</head>
<body>
<div style="width:900px; height:900px">
<!-- 차트가 그려질 부분 -->
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">
let context = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(context, {
type : 'bar' // 차트의 형태
, data : // 차트에 들어갈 데이터
{
labels : // X 축
[
'1', '2', '3', '4', '5', '6', '7'
]
, datasets : // 데이터
[
{
label : '차트 제목' // 차트 제목
, fill : false // line 형태일 때, 선 안쪽을 채우는지 여부
, data :
[
21, 19, 25, 20, 23, 26, 25 // X축 label에 대응되는 데이터 값
]
, backgroundColor : // 막대 그래프 색상
[
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
]
, borderColor : // 경계선 색상
[
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
]
, borderWidth : 1 // 경계선 굵기
25;
]
25;,
options :
{
scales :
{
yAxes :
[
{
ticks :
{
beginAtZero : true
25;
25;
]
25;
25;
25;)
</script>
<!-- 출처 : https://mieumje.tistory.com/56 [Chart.js]Chart.js로 차트 그리기 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<title>Chart JS Test #01</title>
</head>
<body>
<div style="width:900px; height:900px">
<!-- 차트가 그려질 부분 -->
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">
let context = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(context, {
type : 'bar' // 차트의 형태
, data : // 차트에 들어갈 데이터
{
labels : // X 축
[
'1', '2', '3', '4', '5', '6', '7'
]
, datasets : // 데이터
[
{
label : '차트 제목' // 차트 제목
, fill : false // line 형태일 때, 선 안쪽을 채우는지 여부
, data :
[
21, 19, 25, 20, 23, 26, 25 // X축 label에 대응되는 데이터 값
]
, backgroundColor : // 막대 그래프 색상
[
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
]
, borderColor : // 경계선 색상
[
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
]
, borderWidth : 1 // 경계선 굵기
25;
,
{
label : '잭과 콩나무'
, fill : false
, data :
[
8, 34, 12, 24, 30, 5
]
, backgroundColor : 'rgb(157, 109, 12)'
, borderColor : 'rgb(157, 109,12)'
25;
]
25;,
options :
{
scales :
{
yAxes :
[
{
ticks :
{
beginAtZero : true
25;
25;
]
25;
25;
25;)
</script>
<!-- 출처 : https://mieumje.tistory.com/56 [Chart.js]Chart.js로 차트 그리기 -->
</body>
</html>
/volume1/web/dokuwiki/data/pages/wiki/chartjs/chart_js_sample01.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
