chart

Chart.js를 이용한 Line Chart 그리기

gregorio 2018. 7. 11. 14:36

시스템 개발 시 시각적인 정보를 제공하기 위해 Chart를 이용하는 Line, Bar 등 다양한 Chart를 화면에 보여주게 된다.


Chart.js를 사용하기 위해서는 먼저 JSP에 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">를 정의한다.


Chart.js는 Chart 그리는 영역을 정의해 주어야 한다.


■Chart 영역 정의


<div>

    <canvas id="cpu_line_chart" width="800" height="200"></canvas>

</div> 


Chart의 넓이와 높이를 정의한다.



서버에서 받아온 데이터를 이용하여 Chart를 그리는 예제이다.

■Chart 그리기


function fn_searchCallBack(result){


var cpuLabels = [];

var cpuUsed = [];

var cpuFree = [];

var sysCpu = [];

var sysUser = [];

$.each(result.cpuInfo, function(i, val){

var dispTime = gfn_nvl(val.updDate);

console.log(dispTime);

dispTime = dispTime.substring(8,14);

console.log(dispTime);

cpuLabels.push(dispTime);

cpuUsed.push(gfn_nvl(val.cpuUsed));

cpuFree.push(gfn_nvl(val.cpuFree));

sysCpu.push(gfn_nvl(val.sysCpu));

sysUser.push(gfn_nvl(val.sysUser));

});

new Chart(document.getElementById("cpu_line_chart"), {

  type: 'line',

  data: {

    labels: cpuLabels,

    datasets: [{ 

        data: cpuUsed,

        label: "Used(%)",

        borderColor: "#3e95cd",

        fill: false

      }, { 

        data: cpuFree,

        label: "Free(%)",

        borderColor: "#8e5ea2",

        fill: false

      }, { 

        data: sysCpu,

        label: "Sys(%)",

        borderColor: "#3cba9f",

        fill: false

      }, { 

        data: sysUser,

        label: "User(%)",

        borderColor: "#e8c3b9",

        fill: false

      }

    ]

  },

  options: {

    title: {

      display: true,

      text: 'CPU Usage'

    }

  }

});

}


먼저 Chart에 Mapping이 필요한 변수를 정의한다.

Line Char는 Array를 사용하기 때문에 var cpuLabels = []; 처럼 Array 변수를 선언한다.


Loop를 돌면서 서버에서 받은 응답 데이터를 Array 변수에 저장한다.


new Chart를 이용하여 Chart를 생성하는데, Chart의 영영이 파라미터로 전달된다.


또한 Array 변수들은 data로 매핑하면 Line Chart가 그려지게 된다.