EASY7
하이차트로 꺽은선 그래프 그리기(highchart) 본문
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
var list = [];
<c:forEach items = "${bidList}" var="item">
list.push("${item.bidDate}");
</c:forEach>
var pricelist = [];
<c:forEach items = "${bidList}" var="item">
pricelist.push(Number("${item.bidPrice}")); //반드시 형변환 해줘야함.ㅠㅠㅠㅠ
</c:forEach>
Highcharts.setOptions({
chart: {
type:'line',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 228, 225)'],
[1, 'rgb(255, 228, 225)']
]
},
// borderWidth: 2,
plotBackgroundColor: 'rgba(255, 228, 225, .9)',
plotShadow: true,
// plotBorderWidth: 1
}
});
var chart1 = new Highcharts.Chart({ //차트 돔 객체 만들기
title: {
text: 'Auction Chart'
},
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
title:{
text: 'time' //X축이름
},
categories: list //X축에 명목형 변수의 값 넣기 (배열)
},
yAxis: {
title:{
text: 'price' //Y축 이름
}
},
series: [{ // array를 통해 여러 계열을 만들 수 있다.
name: 'bid',
data: pricelist //bid라는 계열의 값 (연속형변수, 숫자라면 숫자로 형변환 했는지 확인...)
} ]
});
});
</script>
</head>
<div id="container" style="width:700px; height:400px;"></div> //이곳에 차트 그려짐
하이차트에서 제공하는 url만 쓰면 쉽게 쓸 수 있었는데
내 데이터를 적용시켜서 하는데에 시간이 조금 걸렸다.
그리고 javascript의 Object와 배열 개념을 좀 공부해야겠다.
y축은 숫자넣어야하는데 형변환 안하고 "문자열"넣어서 계속 에러 떴다.ㅠㅠㅠㅠㅠㅠㅠ
결과 창
참고한 코드 : https://www.highcharts.com/demo/line-labels
코드의 의미 : http://www.w3big.com/ko/highcharts/highcharts-setting-detail.html
'개발 공부 > HTML5 & JAVASCRIPT' 카테고리의 다른 글
| javascript에서 내부 리스트(list) 사용하기 (0) | 2018.05.29 |
|---|---|
| javascript 오류 모음 (0) | 2017.11.24 |
| daisy_hyun :: CSS font (0) | 2016.12.16 |
| daisy_hyun :: CSS (0) | 2016.12.16 |
| CSS 파일 import 또는 link (0) | 2016.12.16 |