시리즈(Series)
차트 종류
X/Y 두 축으로 구성되는 2차원 평면 위에서 데이터는 여러가지 방식으로 표시할 수 있다.
여러 값을 비교하거나, 값이 변경되는 경향을 유추할 수 있도록 표시할 수도 있는데,
이런 차트의 종류를 시리즈(Series)라고 하며, RealChart에서는 널리 쓰이는 시리즈들을 표함해서
여러 종류의 시리즈 타입을 제공한다.
차트 하나에 여러 개의 시리즈가 동시에 표시될 수 있다.
데이터포인트(DataPoint)
시리즈에 연결되는 data의 개별 값들은 내부적으로 각각 데이터포인트 모델로 생성되고, 시리즈 종류에 따라 다양한 모양으로 표시된다.
Data
데이터포인트들로 생성되는 시리즈 data는 여러가지 형식의 배열로 지정할 수 있다.
대부분의 시리즈 데이터포인트는 x, y 두 값을 필요로 하는데, 값을 하나만 제공하는 경우 y값으로 가져오고,
x값은 순서에 따라 자동으로 결정된다.
또, 시리즈의 종류에 따라 데이터포인트의 값을 결정하는 방식이 다르게 된다.
데이터소스 값들에서 데이터포인트 값을 가져오는 방식은 각 시리즈 설정 도움알에 설명한다.
숫자 배열
{
data: [3, 5, 1, 7, 9],
}배열의 각 숫자는 데이터포인트의 y값이 되고, x값은 0부터 순서대로 자동 설정된다. z값을 요구하는 시리즈일 경우 y값으로 대체된다.
숫자 배열의 배열
데이터 각 항목을 배열로 지정할 수 있다. 기본적으로는 시리즈가 요구하는 개수만큼 순서대로 지정해야 한다. 즉, 대부분의 시리즈는 x, y 두 값이 필요하므로 배열에 순서대로 두 값을 지정한다.
{
data: [[3, 4], [5, 6,], [1, 7], [9, 11]],
// 카테고리 축에 연결된 경우 카테고리로 사용될 이름을 지정한다.
data: [['name1', 4], ['name2', 6,], ['name3', 7], ['name3', 11]],
}시리즈가 요구하는 값 개수 이상 지정된 경우,
시리즈의 xField, yField로 각각 해당하는 값의 인덱스를 지정할 수도 있다.
버블시리즈 등 세 값을 요구하는 경우에는 zField를 사용한다.
colorField를 지정해서 데이터포인트의 color를 설정할 수 있다.
object 배열
데이터포인트 정보를 json 객체로 지정할 수 있다.
x 값은 xField로 지정된 속성값, 또는 'x', 'name', 'label' 중 순서대로 값이 설정된 것으로 지정된다.
y 값은 yField로 지정된 속성값, 또는 'y', 'value' 중 순서대로 지정된다.
버블시리즈 등 세 값을 요구하는 경우에는 zField로 지정된 속성값, 또는 'z' 속성 값으로 지정된다.
color 값은 colorField, 또는 'color' 속성으로 지정된다.
시리즈 그룹(SeriesGroup)
몇몇 종류의 시리즈들은 group으로 묶어서 별도의 방식으로 표시할 수 있다.
BarSeriesGroup
LineSeriesGroup
AreaSeriesGroup
BumpSeriesGroup
CircleBarSeriesGroup
PieSeriesGroup
설정
차트 설정의 최상위 series 항목으로 설정한다. 시리즈들의 설정을 배열로 지정하는데, 시리즈가 하나이면 설정 json을 바로 지정할 수 있다.
const config = {
series: [{
}, {
}]
}const config = {
series: {
}
}시리즈그룹도 유사하게 설정한다. 그룹 type을 지정하지 않는 경우 'children' 배열이 있으면 시리즈그룹으로 생성된다.
const config = {
series: {
type: 'bargroup',
layout: 'stack',
children: [{
}, {
}]
}
}