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