<!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>