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>
