Chart

RealChart의 공개 차트 모델.

Properties

assets: AssetCollection readonly

차트에 등록된 asset 컬렉션.
gradient, pattern, 이미지 등을 id로 조회한다.
asset은 asset으로 설정한다.

default :undefined

body: Body readonly

차트 시리즈, 게이지, annotation들이 그려지는 plotting 영역 모델.

default :undefined

credits: Credits readonly

크레딧 모델.

default :undefined

data: ChartDataCollection readonly

차트 데이터 셋.

default :undefined

exporter: Exporter readonly

차트 내보내기 관련 설정 모델.

default :undefined

first: Series | SeriesGroup readonly

첫번째 시리즈 혹은 시리즈그룹.

default :undefined

gauge: Gauge readonly

첫번째 게이지.

default :undefined

gaugeType: string (opens in a new tab) readonly

기본 게이지 종류.
게이지에 type을 지정하지 않으면 이 속성 type의 게이지로 생성된다.

default :undefined

general: ChartGeneral readonly

차트 전역 설정 모델.

default :undefined

inverted: boolean (opens in a new tab) readonly

true면 x축과 y축을 뒤바꿔 표시한다.
즉, true면 x축이 수직, y축이 수평으로 배치된다.

default :undefined

legend: Legend readonly

차트 범례 모델.

default :undefined

polar: boolean (opens in a new tab) readonly

true면 차트가 극좌표계 (opens in a new tab)로 표시된다. 기본은 직교좌표계 (opens in a new tab)이다. 극좌표계일 때, x축이 원호에, y축은 방사선에 위치하고, 아래의 제한 사항이 있다.

1. x축은 첫번째 축 하나만 사용된다.
2. axis.position 속성은 무시된다.
3. chart, series의 inverted 속성이 무시된다.
4. 극좌표계에 표시할 수 없는 series들은 표시되지 않는다.

default :undefined

selection: Selection readonly

차트 전역 데이터포인트 선택 상태.
마우스 클릭과 프로그램 호출이 이 상태를 함께 사용하므로, 어느 쪽으로 바꾸더라도 화면과 이벤트가 동일하게 반영된다.
하나씩 다루는 select · add · toggle · unselect는 데이터포인트 객체만 받는다. x값으로 고르거나 여러 개를 한 번에 다루려면 selectAll · unselectAll을 쓴다. 전체 해제는 chart.unselectAll()이고, chart.selection.clear()와 같다. 선택할 수 없는 시리즈(selection의 visible이 false)의 데이터포인트는 어느 메서드로도 선택되지 않는다.
[주의] unselectAll() 뒤에 selectAll()을 부르면 이벤트가 해제 · 선택 두 번에 나뉘어 호출된다.

chart.selection.select(point);   // 기존 선택 해제 후 하나만 선택
chart.selection.add(point);      // 기존 선택 유지하고 추가
chart.selection.toggle(point);
chart.selectAll({ sales: ['1월', '3월'] });  // x값으로 여러 포인트를 추가 선택
chart.unselectAll('1월');
chart.unselectAll();                         // 전체 해제
chart.selection.selectedPoints;
chart.selection.focusedPoint;

default :undefined

series: Series readonly

차트에 설정된 첫번째 시리즈.
그룹에 포함된 시리즈들을 모두 포함해서 첫번째 시리즈이다. 시리즈 개요 및 시리즈 설정을 참조한다.

default :undefined

seriesNavigator: SeriesNavigator readonly

시리즈 내비게이터 모델.

default :undefined

split: ISplit readonly

Split 설정 모델.

default :undefined

subtitle: Subtitle readonly

차트 부제목 모델.

default :undefined

title: Title readonly

차트 제목 모델.

default :undefined

tooltip: Tooltip readonly

툴팁 모델.

default :undefined

type: string (opens in a new tab) readonly

기본 시리즈 종류.
시리즈에 type을 지정하지 않으면 이 속성 type의 시리즈로 생성된다.

default :undefined

xAxis: Axis readonly

첫번째 x 축.

default :undefined

yAxis: Axis readonly

첫번째 y 축.

default :undefined

Methods

addSeries(source, animate?): Series

시리즈를 추가한다.

return 생성된 시리즈 객체.

destroy(): void (opens in a new tab)

차트 객체를 해제한다.
공개 API 호환을 위해 메서드명은 destroy를 유지하며, 내부적으로는 dispose를 호출한다.

export(options): void (opens in a new tab)

현재 표시 중인 차트를 PNG, JPG 또는 SVG 벡터 이미지로 다운로드한다.

chart.export({
     type: 'png',
     fileName: 'realchart'
})

getAnnotation(name): Annotation

Annotation 이름에 해당하는 Annotation 객체를 리턴한다.

return Annotation 객체

getGauge(name): GaugeBase

게이지 이름에 해당하는 게이지 객체를 리턴한다.

return 게이지 객체

getSeries(name): Series | SeriesGroup

시리즈 이름에 해당하는 시리즈 객체를 리턴한다.

return 시리즈 객체

getXAxis(name): Axis

name 매개변수가 문자열이면 지정한 이름의 x 축을, 숫자이면 해당 index에 위치하는 x 축을 리턴한다.

return 축 객체

getYAxis(name): Axis

name 매개변수가 문자열이면 지정한 이름의 y 축을, 숫자이면 해당 index에 위치하는 y 축을 리턴한다.

return 축 객체

load(config, loadAnimation?, callback?): Chart

기존 모델 설정을 모두 제거하고 초기화 한 후, config로 전달된 설정에 따라 차트를 새로 구성한다.
기존에 생성되었던 시리즈나 게이지들과 축들이 모두 제거되고 새로 생성된다.

removeSeries(series, animate?): void (opens in a new tab)

기존 시리즈를 제거한다.

render(): void (opens in a new tab)

다음 rendering frame을 기다리지 않고, 차트를 즉시 다시 그린다.
차트 rendering 작업은 자원 소모가 많고 소용 시간도 적지 않으므로, data나 여러 모델을 수정하는 경우 모든 작업이 완료된 후 한 번 호출해야 한다. 가능하면 이 함수는 호출하지 않고 차트 기본 동작(다음 frame에 이전 변경 사항들을 모아서 한 번 rendering)으로 실행되게 해야 한다.

selectAll(target): boolean (opens in a new tab)

x값이 같은 데이터포인트들을 골라 기존 선택에 더한다.
고른 데이터포인트마다 chart.selection.add를 차례로 호출한 것과 결과가 같고, 마지막 데이터포인트가 focus가 된다. 다른 점은 이벤트를 조작이 끝난 뒤 한 번에 알린다는 것이다. onSelectionChanged는 선택이 바뀐 시리즈마다 한 번, onFocusChanged는 한 번만 호출된다.
차례는 시리즈 순서(시리즈 name으로 지정하면 키 순서), 지정한 x값 순서, 시리즈 안 데이터포인트 순서다. 이미 선택된 데이터포인트를 다시 고르면 선택 순서만 맨 뒤로 옮긴다. 순서만 바뀌면 true를 리턴하고 다시 그리지만, 바뀐 시리즈가 없으므로 onSelectionChanged는 호출되지 않는다.
없는 시리즈, 선택할 수 없는 시리즈, 없는 x값은 건너뛴다. 화면에 그려지지 않는 데이터포인트(숨긴 시리즈 · 숨긴 그룹 · 숨긴 데이터포인트 · 값 없는 데이터포인트 · 확대 범위 밖)도 고르지 않는다. 고르면 focus가 화면 어디에도 표시되지 않기 때문이다. 확대나 표시를 바꾼 직후에 호출해도 바뀐 상태로 판정한다. 다만 축의 strictMin · strictMax로 잘려 보이지 않는 데이터포인트는 그려지는 것으로 본다. pie의 '기타' 조각(othersGroup)은 x값으로 고르거나 풀 수 없다. chart.selection.add · unselect에 데이터포인트 객체로 다룬다. '기타'에 묶인 데이터포인트는 그려지지 않는 것으로 본다. othersGroup을 켜거나 묶음 기준(minValue 등)을 바꾼 직후에는 직전 렌더링의 묶음으로 판정하고, 끈 직후에는 바로 반영해 묶였던 데이터포인트를 고른다.
[주의] 데이터포인트는 렌더링을 준비할 때 만들어진다. 첫 화면에서 고르려면 createChart · load의 callback(첫 렌더링이 끝난 뒤 호출된다) 안에서 호출한다. data를 바꾼 뒤에는 chart.render() 뒤에 호출한다. 그 전에는 고를 데이터포인트가 없어 아무 것도 선택되지 않는다. 처음부터 숨긴(visible: false) 시리즈도 보이게 한 뒤 한 번 그려야 데이터포인트가 만들어진다. 값을 바꾼 뒤(updatePoint 등) 다시 그리기 전에는 값 없음(null) 여부는 바뀐 값으로, x 위치와 축이 받지 않는 값(log 축의 0 등)은 바뀌기 전 값으로 판정한다. 바뀐 값으로 고르려면 chart.render() 뒤에 호출한다.
[주의] data를 바꾸거나 선택을 끄면 남은 선택이 다음 렌더링을 준비하는 중에 정리되고, 그때 onSelectionChanged가 호출된다. 그 콜백 안에서는 x축을 쓰는 시리즈(bar 등)의 새 데이터포인트 위치가 정해지기 전이라 숫자 x값(category 순번, linear 축 값 등)으로는 고를 수 없다. 데이터포인트의 x에 적힌 이름(category 이름, pie 조각 이름)으로는 고를 수 있다. 다시 고를 때는 렌더링이 끝난 뒤에 호출하는 것을 권한다.

chart.selectAll('1월');                                  // 모든 시리즈에서 x가 '1월'인 포인트
chart.selectAll(['1월', '3월']);                         // x 여러 개
chart.selectAll({ sales: ['1월', '3월'] });              // 한 시리즈
chart.selectAll({ sales: ['1월', '3월'], cost: '2월' });  // 시리즈마다 다른 x
 
// 첫 화면에서 고르기
RealChart.createChart(document, 'realchart', config, true, ({ chart }) => {
    chart.selectAll('1월');
});

return 상태가 바뀌었으면 true.

seriesByType(type): Series | SeriesGroup

지정한 type에 해당하는 첫번째 시리즈나 시리즈그룹 객체를 리턴한다.

return 시리즈 객체

unselectAll(target?): boolean (opens in a new tab)

x값이 같은 데이터포인트들의 선택을 해제한다.
인자를 주지 않으면 전체 선택과 focus를 해제한다(chart.selection.clear()와 같다). null · undefined · 빈 배열 · 빈 객체를 넘기면 고를 데이터포인트가 없어 아무것도 하지 않고 false를 리턴한다. 값이 빈 변수를 넘겨 선택 전체가 풀리지 않게 하기 위해서다.
고른 데이터포인트마다 chart.selection.unselect를 차례로 호출한 것과 결과가 같고, onSelectionChanged는 선택이 바뀐 시리즈마다 한 번, onFocusChanged는 한 번만 호출된다. 지정 방식은 selectAll과 같다. 다만 숨긴 데이터포인트와 값이 없어진 데이터포인트도 해제한다. 숨기기 전에 선택한 것도 풀 수 있어야 하기 때문이다. 선택할 수 없게 된 시리즈의 선택은 다음 렌더링에서 저절로 해제되므로 이 메서드의 대상이 아니다.
[주의] category 축이 categoryField로 x와 다른 필드에서 카테고리 이름을 가져오면, 숨긴 시리즈의 데이터포인트는 숨기기 전 위치로 찾는다. 그 사이 카테고리 목록이 바뀌었으면 다른 데이터포인트가 해제되거나 아무것도 해제되지 않을 수 있다. 이때는 chart.selection.unselect에 데이터포인트 객체를 넘긴다.

chart.unselectAll({ sales: '1월' });  // sales의 '1월'만 해제
chart.unselectAll('1월');             // 모든 시리즈의 '1월' 해제
chart.unselectAll();                  // 전체 해제

return 상태가 바뀌었으면 true.

updateOptions(options, render?): void (opens in a new tab)

load와 달리 기존 모델을 유지하면서 차트 설정 일부를 반영한다.