맨위로가기
 

SBCHART

닫기

SBChart 객체 생성 및 렌더링 - render()

#2.0.0

SBChart 객체를 생성하는 방식은
  1. static 함수인 sb.chart.render() 를 사용하는 방식과
  2. 인스턴스를 직접 생성하는 new sb.chart() 방식
2가지로 나누어지며 첫 번째 방식 sb.chart.render() 함수는 SBChart 객체 생성과 렌더링이 동시에 수행됩니다.

sb.chart.render()

#2.0.0

SBChart 객체를 생성하고 렌더링 합니다.
static 함수이며 리턴 값은 SBChart Object입니다.

  • Parameters
    • 차트를 그려줄 엘리먼트 (bind element), Mandatory
    • 차트 옵션 (데이터 포함), Mandatory
  • Return
    • SBChart 객체
  • Example
    var chart = sb.chart.render("#chartWrap", {
      data: {
          columns: [
              ["2015",3.51,4.6,3.43,7.96,3.37,5.83,0.35,3.23,-0.09,4.47,2.21,1.13,0.77,0.35,0.92,2.65,1.64,8.08]
          ]
      }
    });
    

[SBCHART].render()

#2.0.0

이미 생성된 SBChart 객체에 차트를 (다시) 그려주기 위한 함수입니다.

  • Parameters
    • 차트를 그려줄 엘리먼트 (bind element), Optional
    • 차트 옵션 (데이터 포함), Optional
  • Example #1
    var chart = new sb.chart("#chartWrap", {
      data: {
          columns: [
              ["2015",3.51,4.6,3.43,7.96,3.37,5.83,0.35,3.23,-0.09,4.47,2.21,1.13,0.77,0.35,0.92,2.65,1.64,8.08]
          ]
      }
    });
    //렌더링-파라미터 없음
    chart.render();
    
  • Example #2
    var chart = new sb.chart("#chartWrap");
    //렌더링-파라미터 1개
    chart.render({
      data: {
          columns: [
              ["2015",3.51,4.6,3.43,7.96,3.37,5.83,0.35,3.23,-0.09,4.47,2.21,1.13,0.77,0.35,0.92,2.65,1.64,8.08]
          ]
      }
    });
    
  • Example #3
    var chart = new sb.chart();
    //렌더링-파라미터 2개
    chart.render("#chartWrap", {
      data: {
          columns: [
              ["2015",3.51,4.6,3.43,7.96,3.37,5.83,0.35,3.23,-0.09,4.47,2.21,1.13,0.77,0.35,0.92,2.65,1.64,8.08]
          ]
      }
    });