IBChart
를 사용하기 위해 아래 4가지 js 파일을 include 합니다.
<script type="text/javascript" src="/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/chart/ibleaders.js"></script>
<script type="text/javascript" src="/chart/ibchartinfo.js"></script>
<script type="text/javascript" src="/chart/ibchart.js"></script>
highcharts
를 반드시 사용해야 합니다.차트 객체 생성은 차트가 만들어질 컨테이너가 구성된 이후에 설정 할 수 있습니다.
div
를 생성 하고, body 태그의 onload
이벤트로 생성하는 방법$(document).ready();
에서 설정하는 방법<!DOCTYPE html>
<html>
<head>
…
<script type="text/javascript">
// 일반적으로 사용 시
function fnLoadPage() {
// 차트 객체 생성
createIBChart("cont", "myChart", {
width:"500px",
height:"500px"
});
}
</script>
</head>
<body onload="fnLoadPage();">
<div id="cont"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
…
<script type="text/javascript">
// jQuery 라이브러리 사용시
$(document).ready(function() {
// 차트 객체 생성
createIBChart("cont", "myChart", {
width:"500px",
height:"500px"
});
});
</script>
</head>
<body>
<div id="cont"></div>
</body>
</html>
차트 객체 생성 완료 후 setOptions
method를 이용하여 차트 구성 옵션을 설정합니다.chart Properties 참고
<!DOCTYPE html>
<html>
<head>
…
<script type="text/javascript">
// 일반적으로 사용 시
function fnLoadPage() {
// 차트 객체 생성
createIBChart("cont", "myChart", {
width:"500px",
height:"500px"
});
// 차트 구성 옵션 설정
myChart.setOptions({
// 사용자 설정
});
}
</script>
</head>
<body onload="fnLoadPage();">
<div id="cont"></div>
</body>
</html>
조회된 데이터를 차트에 동적으로 적용합니다. 이를 위한 단계는 아래와 같습니다.
조회 데이터(JSON or XML) 생성하기 [필수] ※ 데이터 구조 참고
조회 완료 이벤트 처리하기 [선택]
myChart.setEventListener("searchEnd", function(event) {
console.log("조회가 완료되었습니다.");
});