Getting Started

#latest  #basic

SBChart는 JS, CSS 2개 파일로 구성되어 있으며 2개 파일을 링크하면 차트 생성 준비가 완료됩니다.

1. JS, CSS 파일 링크

JS, CSS 파일을 링크합니다.

<link rel="stylesheet" href="css/sbchart.css"/>
<script type="text/javascript" src="js/sbchart.js"></script>

2. SBChart가 생성될 Element 추가

차트를 그려줄 위치를 지정합니다.

CSS padding을 사용하실 경우 차트가 그려질 Element는 padding을 0으로 지정하고 global.padding옵션을 사용하여 padding 값을 조정하는 것이 좋습니다.

<div id="chartWrap"></div>

3. 차트 그려주기

데이터와 옵션을 지정하여 차트를 렌더링 합니다.

차트를 생성하는 방법은 아래와 같이 3가지 방법이 있습니다.

var chart = sb.chart.render("#chartWrap", {
    data: {
        columns: [
            ["data1", 5, 2, 3, 4, 5, 6],
            ["data2", 15, -12, 13, -14, 15, 16],
            ["data3", 25, 22, 23, 24, -25, 26],
        ]
    }
});

var chart = new sb.chart("#chartWrap", {
    data: {
        columns: [
            ["data1", 5, 2, 3, 4, 5, 6],
            ["data2", 15, -12, 13, -14, 15, 16],
            ["data3", 25, 22, 23, 24, -25, 26],
        ]
    }
});
chart.render();

var chart = new sb.chart("#chartWrap");
chart.render({
    data: {
        columns: [
            ["data1", 5, 2, 3, 4, 5, 6],
            ["data2", 15, -12, 13, -14, 15, 16],
            ["data3", 25, 22, 23, 24, -25, 26],
        ]
    }
});