Jekyll 블로그 - line chart 그리기

2018-11-24

Jekyll 블로그에서 chart.js를 이용해 line chart를 그리는 예제입니다.

chart.js import

chart.js 를 사용하기 위해 _config.yml 에 아래 라인을 추가해줍니다.

head_scripts:
  - https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js

라인 차트 그리기

아래와 같이 canvas를 하나 만들고 script 코드로 차트를 그립니다.
line chart에 대한 자세한 옵션은 여기서 참고할 수 있습니다.

샘플코드는 여기를 참고하여 만들었습니다.

<div style="width:100%;">
  <canvas id="canvas"></canvas>
</div>

<script>
new Chart(document.getElementById("canvas"), {
    type: 'line',
    data: {
        labels: ['1', '2', '3', '4', '5', '6', '7'],
        datasets: [{
            label: '테스트 데이터셋',
            data: [
                10,
                3,
                30,
                23,
                10,
                5,
                50
            ],
            borderColor: "rgba(255, 201, 14, 1)",
            backgroundColor: "rgba(255, 201, 14, 0.5)",
            fill: true,
            lineTension: 0
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '라인 차트 테스트'
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'x축'
                }
            }],
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0,
                },
                scaleLabel: {
                    display: true,
                    labelString: 'y축'
                }
            }]
        }
    }
});

</script>

결과