Chart.js로 JSP 막대차트와 선그래프 띄우기

Chart.js로 JSP 차트띄우기 (버전주의 Chart.min.js - 1.0.2)

chartJS를 가지고 jsp에 차트를 띄운 예제를 공유해드리겠습니다.

일단 아래부분에 스크립트를 head안쪽이나 스크립트있는쪽에 넣어서 import해주세요.

그리고 자바스크립트부분에 아래 barChart() / lineChart() 두가지 함수가있는데

barChart는 막대모양차트이고 lineChart는 선그래프차트입니다.

data 안쪽에 labels: [] 이안에는 하단에 들어갈 데이터이며, labels와 datasets - data와 갯수가 동일해야합니다.

사진보시면 대충 데이터가 어떤곳에 쓰이는지 감이 오실거라 믿습니다.

그밖에 datasets안쪽에 label아래는 차트의 색상값을 설정해줄수있습니다.

설정이 다됬으면

var ctx = document.getElementById("barCanvas").getContext("2d"); 

var options = { };

var barChart = new Chart(ctx).Bar(data, options);

이부분이 canvas의 ID값을 가지고 캔버스에 2d차트를 띄워주는 부분입니다.

옵션이 필요하시면 옵션값을 주면됩니다.

위와같이 new Chart로 각 ctx / data / option 등등 넣어서 띄워주시면됩니다.

JSP - html부분에서 <canvas>태그에 차트가 그려지며, 

아래소스보시면 아시겠지만태그에 높이와 너비등을 설정해줄수있습니다. 

자세한 옵션의 함수나 그래프유형 스크립트 및 파일등이 필요하시면 

chartJS공식홈페이지 : http://www.chartjs.org/samples/latest/ 

공식홈페이지를 이용하시면 될것같습니다.

SCRIPT

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

JSP - 자바스크립트

// 막대차트입니다.

function barChart(){

var data = {

labels: ["09시", "10시", "11시", "12시", "13시", "14시", "15시", "16시", "17시", "18시", "19시", "20시", "21시", "22시"],

datasets: [

{

label: "",

fillColor: "rgba(150,200,250,0.5)",

strokeColor: "rgba(150,200,250,0.8)",

highlightFill: "rgba(150,200,250,0.75)",

highlightStroke: "rgba(150,200,250,1)",

data: [65, 59, 80, 81, 56, 55, 30, 100, 120, 50, 11, 40, 70, 120]

}

]

};

    var ctx = document.getElementById("barCanvas").getContext("2d");

    var options = { };

    var barChart = new Chart(ctx).Bar(data, options);

}

//선 차트입니다.

function lineChart(){

var data = {

        labels: ["월","화","수","목","금","토","일"],

        datasets: [

            {

                label: "",

                fillColor: "rgba(220,220,220,0.2)",

                strokeColor: "rgba(220,220,220,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [2, 3, 5, 7, 11, 13, 17]

            },

            {

                label: "",

                fillColor: "rgba(151,187,205,0.2)",

                strokeColor: "rgba(151,187,205,1)",

                pointColor: "rgba(151,187,205,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(151,187,205,1)",

                data: [0, 1, 1, 2, 3, 5, 8]

            }

        ]

    };

    var ctx = document.getElementById("lineCanvas").getContext("2d");

    var options = { };

    var lineChart = new Chart(ctx).Line(data, options);

}

JSP - HTML

<-- 막대차트입니다. -->

<div class="graphBox">

<canvas id="barCanvas" width="384" height="210"></canvas>

</div>

<-- 선차트입니다. -->

<div class="graphBox">

<canvas id="lineCanvas" width="384" height="210"></canvas>

</div>

※ Chart.min.js - 2.7.1

* fillColor - backgroundColor 변경됨

* strokeColor - borderColor 변경됨

* type 선언이 달라짐 아래와같이 type선언

var ctx = document.getElementById(elementId).getContext('2d');

new Chart(ctx, {

    type: 'bar',

    data: {

        labels: labels,

        datasets: [{

            label: label,

            data: data,

            backgroundColor: 'rgba(54, 162, 235, 0.2)',

            borderColor: 'rgba(54, 162, 235, 1)',

            borderWidth: 1

        }]

    },

    options: {

        scales: { yAxes: [{ ticks: { beginAtZero:true } }] }   // 데이터값 시작을 0부터시작

    }

});

※ lables 와 data에 request값 넣기

//차트 값 생성

var labels = new Array();

var data = new Array();

<c:forEach items="${resultList}" var="result" >

var json = new Object();

labels.push("${result.month}");

data.push("${result.monthVal}");

</c:forEach>