IBChart(H) API

IBChart(H) API

Index

시작하기

Install

Create

Initialize

Data Interface

시작하기

top

Install

top

IBChart를 사용하기 위한 install 가이드는 아래와 같다.
IBChart를 활용하여 구현 할 HTML 페이지 안에 ibleaders.js, ibchartinfo.js, ibchart.js를 아래와 같이 include 한다.
IBChart를 이용하려면 highcharts를 사용해야한다. highcharts.js는 기본으로 포함 시키고 필요에 따라 highcharts의 module를 추가해서 사용한다.
<!DOCTYPE html>
<html>
<head>
    <script src="highcharts/highcharts.js"></script>
    <script src="ibchart/ibleaders.js"></script>
    <script src="ibchart/ibchartinfo.js"></script>
    <script src="ibchart/ibchart.js"></script>
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>
위와 같이 html 파일을 구성하였다면 IBChart를 사용하기 위한 install 작업은 완료된 것이다.
IBChart 제품이 제공하는 파일들은 아래와 같다.
Name Type Description
ibchart.js file IBChart Core 파일
ibchartinfo.js file IBChart 사용시 필요한 필수 상수 및 유틸리티 함수가 포함된 파일
ibleaders.js file 라이선스 파일

Create

top

IBChart의 객체 생성

IBChart의 객체 생성은 및 사용방법은 아래와 같다.
1. 컨테이너로 사용할 특정 div 엘리먼트를 이용해 차트를 생성하는 방법(createIBChart)
이 방법을 사용하는 경우 해당 div 엘리먼트를 컨테이너로 하는 IBChart 객체가 생성된다.
<!DOCTYPE html>
<html>
<head>
    <script src="highcharts/highcharts.js"></script>
    <script src="ibchart/ibleaders.js"></script>
    <script src="ibchart/ibchartinfo.js"></script>
    <script src="ibchart/ibchart.js"></script>
    <script type="text/javascript" charset="utf-8">
        function fnLoadPage() {
            createIBChart(chart_div, "myChart", {
                width: "100%",
                height: "500px"
            });
        }
    </script>
</head>
<body onload="fnLoadPage()">
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>

Initialize

top

IBChart의 초기화 설정

IBChart의 초기화 설정은 아래의 메소드를 이용하여 설정 한다.
Method Description
setOptions 차트에 대한 속성을 설정한다. 
<!DOCTYPE html>
<html>
<head>
    <script src="highcharts/highcharts.js"></script>
    <script src="ibchart/ibleaders.js"></script>
    <script src="ibchart/ibchartinfo.js"></script>
    <script src="ibchart/ibchart.js"></script>
    <script type="text/javascript" charset="utf-8">
        function fnLoadPage() {
            createIBChart(chart_div, "myChart");

            // 데이터 없이 기본값으로 초기화
            myChart.setOptions({

            },{
                append: false,
                redraw: true
            });
        }
    </script>
</head>
<body onload="fnLoadPage()">
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>
실행 결과

IBChart는 데이터가 입력되지 않으면 모든 요소가 표현되지 않는다.

IBChart의 데이터 설정

IBChart의 데이터 설정은 아래의 메소드를 이용하여 설정 한다.
Method Description
loadSearchData 차트에 대한 데이터 설정한다. 
<!DOCTYPE html>
<html>
<head>
    <script src="highcharts/highcharts.js"></script>
    <script src="ibchart/ibleaders.js"></script>
    <script src="ibchart/ibchartinfo.js"></script>
    <script src="ibchart/ibchart.js"></script>
    <script type="text/javascript" charset="utf-8">
        function fnLoadPage() {
            createIBChart(chart_div, "myChart");

            myChart.loadSearchData({
                "IBChart": {
                    "title" : "차트 제목",
                    "subTitle" : "차트 부제목",
                    "data": [{
                        "series": [13.2]
                    },{
                        "series": [12.9]
                    },{
                        "series": [12.4]
                    },{
                        "series": [12.3]
                    },{
                        "series": [12.9]
                    },{
                        "series": [13.1]
                    }]
                }
            }, {
                append : false
            });
        }
    </script>
</head>
<body onload="fnLoadPage()">
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>
실행 결과