chart js 라인그래프 질문드립니다~!
본문
chart js 사용해서 라인 그래프 만들려고 하는데 결과가 아래 그림처럼 나오고 싶습니다.
그래프는 데이터값대로 나오고, 레이블과 데이터글자가 처음과 끝에만 표시되게 하고 싶은데요,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>차트 테스트</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<style>
.graph-area{width:300px;height:125px;margin:20px auto 10px;}
.label-area{display:flex;justify-content:space-between;margin:0 auto;}
.label-area span{display:block;width:calc(100% / 6);font-size:11px; color: blue;text-align: center;opacity:0;}
.label-area span:first-of-type,
.label-area span:last-of-type{opacity:1;}
</style>
</head>
<body>
<dl>
<dt>MSET LEVEL</dt>
<dd class="graph-area">
<canvas id="re-mset-chart"></canvas>
</dd>
<dd class="label-area">
<span>2018<br class="mo-br">10/15</span>
<span>2019<br class="mo-br">02/08</span>
<span>2019<br class="mo-br">06/19</span>
<span>2019<br class="mo-br">10/30</span>
<span>2019<br class="mo-br">12/30</span>
<span>2020<br class="mo-br">04/07</span>
</dd>
</dl>
<script>
//MSET LEVEL
var ctx = document.getElementById('re-mset-chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [['2018','10/15'], ['2019','02/08'], ['2019','06/19'], ['2019','10/30'], ['2019','12/30'], ['2020','04/07']],
datasets: [{
label: 'MSET LEVEL',
borderColor: 'rgb(60, 65, 72)',
data: [5, 6, 6, 6, 7, 8],
LineTension:0, //직선차트
fill:false, //배경색 채우지 않음
pointRadius : '4',
pointBorderColor : 'rgb(60, 65, 72)',
pointBackgroundColor : 'white',
pointBorderWidth : '2', //pointBorder사이즈
pointHoverBorderWidth :'2', //hover시 pointBorder사이즈
pointHoverBackgroundColor : 'white', //hover시 pointBacground
}]
},
options: {
maintainAspectRatio : false, //차트 비율 유지하지않음
randing: true,
tooltips: {
enabled: false
}, //hover시 보였던 툴팁 제거
hover: {
animationDuration: 0
},
//차트위에 값 나타내기
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = 'rgb(60, 65, 72)';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
legend: {
display: true,
labels: {
boxWidth: 0,
fontColor: 'rgba(0,0,0,0)', //제목 레이블 안보이게
fontSize: 20
}
},
scales: {
xAxes: [{
ticks: {
fontSize: 11, //x축 텍스트 폰트 사이즈
fontColor: 'rgba(0,0,0,0)', //x축 레이브 안보이게
},
gridLines: {
display:false,
lineWidth:0
}
}],
yAxes: [{
ticks: {
display: false, //y축 텍스트 삭제
beginAtZero: false, //y축값이 0부터 시작
},
gridLines: {
display:false,
lineWidth:0
}
}]
}
}
});
</script>
</body>
</html>
여기까지는 했는데 데이터 가운데를 지우는 방법을 모르겠네요 ㅜ
답변을 작성하시기 전에 로그인 해주세요.
