Line Chart(라인 차트)

짱구를왜말려? 2020. 6. 26. 10:38
SMALL
<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>라인차트</title>
</head>
<body>
<canvas id="lineChart"></canvas>

<div class="points" style="display:none;">
	<img src="../comn/img/point01.png" alt="" id="point01">
	<img src="../comn/img/point02.png" alt="" id="point02">
	<img src="../comn/img/point03.png" alt="" id="point03">
	<img src="../comn/img/point04.png" alt="" id="point04">
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>

	// 라인 차트
	var ctx = document.getElementById('lineChart').getContext('2d');

	var pointImages = [
		document.getElementById("point01"),
		document.getElementById("point02"),
		document.getElementById("point03"),
		document.getElementById("point04"),
	];

	var lineChart = new Chart(ctx, {
		// The type of chart we want to create
		type: 'line',

		// The data for our dataset
		data: {
			labels: ['레베카', '로사', '지영', '리사'],
			datasets: [{
				label: '투표수',
				backgroundColor: 'rgba(255, 99, 132,.5)', // 차트 배경색
				fill : "start", // "end" 차트 위쪽, 아래쪽 중 어느쪽에 색깔을 채울지
				borderColor: 'rgb(255, 99, 132)', // 라인 색깔
				borderWidth: 3, // 라인 넓이(px)
				lineTension: .1, // 각 꼭지점 근처 라인의 border-radius(뾰족하게 할지, 둥글게 할지)
				pointBackgroundColor: "blue", // 꼭지점 색깔, ["black", "pink", "white"] 이런식으로 각 꼭지점마다의 색깔 각각 지정 가능, 다른 속성들도 마찬기지로 array로 각각 제어가능
				pointBorderColor: "yellow", // 꼭지점 border 색깔,
				// pointBorderWidth: 2,
				// pointHoverBackgroundColor: "black", // 꼭지점 hover 컬
				// pointHoverBorderColor: "black", // 꼭지점 hover 컬렁
				hitRadius: 25, // 꼭지점에 마우스 갖다대면 라벨이 뜸 이렇게 갖다 댔을 때 뜨는 영역 크기, 이미지 포인터를 넣으면 꼭지점 자체 크기가 커지기 때문에 이 부분도 늘려줘야됨
				pointBorderWidth: 2, // 꼭지점 border 넓이
				pointStyle: pointImages, // 꼭지점 모양, 이미지 외에도 "start 등 다양하니까 문서 참고, 배열로 안하고 한 이미지만 넣으면 포인트를 다 그 이미지로 채움, default는 원형 꼭지점
				// showLine: false // false시 라인 없이 꼭지점만 나옴
				// spanGaps: false // false 시 데이터 나열할 때 혹시 빈 데이터가 있거든 자연스럽게 채워줌(공백으로 표시 안됨)
				// steppedLine: true // true 시 라인이 자연스럽게 곡선으로 연결되는게 아니라 계단식으로 딱딱 끊어져서 연결됨
				data: [10, 20, 8, 5],
			}]
		},

		// Configuration options go here
		options: {
			layout: {
				padding: {  // 간격
					left:50,
					right:50,
					top:20,
					bottom:20
				}
			},
               scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display:false
                    }
                }]
            }
		}
	});
</script>
</body>
</html>
LIST