[JavaScript] Chrat.js 라인 차트 예제

Chart.js는 JavaScript charting입니다.

여러 종류의 차트를 그릴 수 있지만 본 포스팅은 라인 차트 예제만 다루도록 차후에 다른 차트도 다뤄보도록 하겠습니다.

 

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

스크립트는 사이트에서 다운받아 사용해도 되고, CDN으로 사용해도 괜찮습니다.

// 직접 다운로드
<script src="resources/vendor/chart/Chart.min.js"></script>

// CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

view 파일에는 canvas 태그를 사용하여 element를 작성하고 id를 지정해줍니다.

본 포스팅의 view는 mustache를 사용하였습니다.

<canvas id="myLineChart"></canvas>

참고로 HTML에서 id의 표기는 카멜 표기법을 사용합니다.

 

js 파일에는 chart를 그리기 위한 코드를 작성합니다.

var ctx = $('#myLineChart')[0];
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        // labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        labels: xArray,

        datasets: [
            {
                label: "value",
                lineTension: 0.1,
                backgroundColor: "rgba(78, 115, 223, 0.05)",
                borderColor: "rgba(78, 115, 223, 1)",
                pointRadius: 1,
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "rgba(78, 115, 223, 1)",
                pointHoverRadius: 3,
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 1,
                pointBorderWidth: 1,
                // data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 0, null, 30000, 25000, 30000],
                data: yArray,
                fill: false
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        layout: {
            padding: {
                left: 10,
                right: 25,
                top: 25,
                bottom: 0
            }
        },
        scales: {
            xAxes: [
                {
                    time: {
                        unit: 'date'
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 12
                    }
                }
            ],
            yAxes: [
                {
                    ticks: {
                        maxTicksLimit: 5,
                        padding: 10,
                        min: -0.05,
                        max: 0.05
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }
            ]
        },
        legend: {
            display: false
        },
        tooltips: {
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            titleMarginBottom: 10,
            titleFontColor: '#6e707e',
            titleFontSize: 14,
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            intersect: false,
            mode: 'index',
            caretPadding: 10,
            callbacks: {
                label: function (tooltipItem, chart) {
                    var datasetLabel = chart
                        .datasets[tooltipItem.datasetIndex]
                        .label || '';
                    return datasetLabel + ': ' + number_format_div1(tooltipItem.yLabel, 2);
                }
            }
        }
    }
});

먼저 canvas의 id를 이용하여 context(ctx)를 불러옵니다. 이후 new Chart()를 통해 chart객체를 생성하는데, 여기서 type을 'line'으로 설정하면 라인 차트가 됩니다.

labels는 x축을 의미하며, xArray는 date를 의미합니다. dateformat은 yyyy-mm-dd HH:MM:ss 입니다.

datasets의 data는 y축을 의미하며, yArray는 y value입니다.

아래 그림에서 time은 xArray의 원소이며, value는 yArray의 원소입니다.

실제 xArray, yArray는 아래와 같이 구성됩니다.

xArray

yArray

그렇기 때문에 options > scaless > xAxes > time의 unit을 'date'로 설정하였습니다.

그 외 다른 옵션에 대한 설명은 공식 홈페이지를 참조하시면 됩니다.

 

데이터 조회와 관련된 Ajax, Controller, SQL, Mybatis에 대한 설명은 생략하도록 하겠습니다.

date를 이용하면 최근 데이터를 조회할 수 있고, 캘린더를 이용하여 조회할 수도 있습니다.