RealChart API 개요

RealChart 웹 컴포넌트 라이브러리는 처음 화면에 표시될 차트의 구성 설정을 모두 준비해서 차트 컴포넌트를 생성한다. 모든 차트 구성 요소에 대한 설정을 JSON 객체 하나에 포함시킬 수 있다.

const config = {
    title: {},
    legend: {},
    series: {},
    xAxis: {},
    yAxis: {},
    // ...
}
const chart = RealChart.createChart(document, 'container', config);

많은 경우 차트를 화면에 표시하는 것만으로 완료될 수 있지만, 차트에 연결한 데이터가 변경돼야 하거나, 구성 요소의 표시 여부를 변경하는 등, 실행 시간 중 차트의 상태를 동적으로 변경할 필요가 있다. RealChart는 실행 시간 차트의 상태를 변경하거나 확인할 수 있는 API를 제공한다.

API는 차트 구성 요소 모델들의 집합이라고 할 수 있는데, 각 구성 요소는 최상위 객체인 차트로 부터 요소에 해당하는 모델 클래스의 객체로 가져올 수 있다. 또, 구성 요소 모델들은 최상위 클래스인 ChartItem을 직간접적으로 계승한다. ChartItem에 실행 시간 설정 변경을 위한 메쏘드들이 구현되어 있다.

const axis = chart.xAxis;   // 첫번째 x축 모델.

또, 차트컨트롤에서 가져온 상위 모델 객체 등은 하위 요소 객체를 가지고 있을 수 있다.

const title = axis.title;   // 축 타이틀 모델.

각 모델 객체들은 설정 옵션을 통해 동작과 표시 방식을 지정하는데, 옵션 속성들을 변경하는 모델 객체의 메소드를 제공한다.

console.log(axis.title.options.text);   // 축 타이틀 텍스트를 가져온다.
 
axis.title.updateOption('text', 'Chart Title');  // 축 타이틀 텍스트를 재설정한다.
 
// 또는 여러 속성을 한꺼번에 설정할 수도 있다.
axis.title.updateOptions({
    text: 'Chart Title',
    style: {
        fill: 'blue'
    }
});
 
// 옵션 객체의 값을 지정할 수는 있지만, 실제 동작과 표시에 반영하기 위해서는 
// 반드시 updateOptions를 호출해야 한다.
// 옵션 속성을 직접 변경하는 것은 권장되지 않는다.
axis.title.options.text = 'Title';
axis.title.updateOptions();

또, 모델의 options 객체는 실행 중 언제든 새로은 것으로 바뀔 수 있으므로, options 객체를 외부에서 가져가 유지하며 사용하는 것은 문제가 된다.

API