한국어

EDPS

chart.js 활용하기

조회 수 108 추천 수 0 2018.06.18 18:57:04

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>

99B3D73359F8195D31


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

<div class="graphBox">

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

</div>


9920DB3359F8195E29



※ 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>


List of Articles
번호 제목 글쓴이 날짜 조회 수
202 [구글ebook의 ascm파일을 PDF 파일로 변환하기] [1] 수텐리 2019-01-08 39
201 sfc /scannow 명령 수텐리 2018-12-17 23
200 Detect Internet Explorer (IE) up to version 11 and Edge (12+) 수텐리 2018-11-28 40
199 추억의 Windows 95를 설치할 수 있는 방법 file 수텐리 2018-09-04 30
198 DVDfab passkey 수텐리 2018-08-26 46
197 GA 코드 관련 수텐리 2018-08-24 49
196 마인드맵 - XMind [1] 수텐리 2018-08-21 39
195 QA 테스트 자동화 툴의 개념과 대표적인 도구 10가지 소개 [1] 수텐리 2018-08-19 194
194 판매재고관리 프로그램 [1] 수텐리 2018-08-17 408
193 PM의 생산성을 '업'시켜줄 프로젝트 관리 툴 15선 WindBoy 2018-08-14 184
192 Find in file for windows 수텐리 2018-07-27 16
191 Internet 연결 시 IP 주소를 확인 WindBoy 2018-07-19 25
190 MS SQL에서 Table Description 추출하는 쿼리 수텐리 2018-07-10 106
189 Spring에서 JSON에 XSS 방지 처리 하기 수텐리 2018-07-05 489
» chart.js 활용하기 WindBoy 2018-06-18 108
187 [펌] postman 관련 WindBoy 2018-05-29 129
186 [블록체인플랫폼] ①이더리움, 블록체인 2.0 시대를 열다 [1] 수텐리 2018-05-23 29
185 Sublime Text를 사용 시 업데이트 안하는 방법 수텐리 2018-04-03 28
184 [Java] 자바 날짜, 시간 계산 예제 (1) 수텐리 2018-04-03 288
183 [Java] 자바 시간, 날짜 계산 (2) 수텐리 2018-04-03 123