chart js 라인그래프 질문드립니다~!

chart js 사용해서 라인 그래프 만들려고 하는데 결과가 아래 그림처럼 나오고 싶습니다.
3531202398_1595233566.1554.png
그래프는 데이터값대로 나오고, 레이블과 데이터글자가 처음과 끝에만 표시되게 하고 싶은데요,
Copy
<!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>
여기까지는 했는데 데이터 가운데를 지우는 방법을 모르겠네요 ㅜ
chart js 라인그래프 질문드립니다~!

답변 1개

공유하기
