Data

차트에 표시할 데이터는 시리즈의 data 속성에 값 목록을 설정해서 연결한다. 값들은 여러 방식의 배열을 직접 지정하거나 Chart Data 객체를 통해 간접 지정한다. 직접 지정하는 경우 시리즈 종류에 따라 배열 항목의 구성이 달라지게 된다.

Y값 배열

bar 시리즈와 같은 단순 시리즈의 경우, 데이터포인트마다 x, y 두 값이 필요한데 대개의 경우 x 값은 자동으로 결정되므로, y값들만 지정해도 되는 경우가 흔하다.

Try Y values

const config = {
    series: {
        type: 'bar',
        data: [155, 138, 122, 133, 114, 113]
    }
}

물론 x값을 명시적으로 지정할 수도 있다. x값은 시리즈가 category 축에 연결된 경우 caregory 이름으로도 사용될 수 있도록 문자열로 지정이 가능하며 순서대로 0부터 시작하는 값을 갖게된다.

const config = {
    series: {
        type: 'bar',
        data: [
            ['abc', 155], 
            ['def', 138]
            ['xyz', 114], 
        ]
    }
}

category축을 포함해서 linear, log 축의 x 값은 숫자로 지정하고, time 축의 경우 Date 객체를 직접 지정할 수 있다. time 축에 숫자로 지정하는 경우 1970.01.01 이 후의 밀리초로 간주한다.

const config = {
    series: {
        type: 'bar',
        data: [
            [0, 155], 
            [1, 138]
            [2, 114], 
        ]
    }
}

복수값 및 Json 배열

candlestcik 시리즈와 같이 데이터포인트 별로 여러개의 값이 필요한 경우, 시리즈 종류별로 값 배치 방식이 해당 설정 문서에 설명되어 있다. candlestick의 경우,

Try Json Array

단일 값 및 값 배열

형식	설명
y	단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.
[]	빈 배열이면 null. x 값은 순서에 따라 자동 결정.
[min, low, mid, high	y]
[x, min, low, mid, high	y]

json 배열

Series 속성	설명
xField	속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.
lowField	속성 값, 또는 'low' 속성 값이 low 값이 된다.
openField	속성 값, 또는 'open' 속성 값이 open 값이 된다.
closeField	속성 값, 또는 'mid' 속성 값이 close 값이 된다.
highField	속성 값, 또는 'high' 속성 값이 high 값이 된다. 지정하지 않으면 yField 값이 사용된다.
yField	속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.
colorField	속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.

복수값일 때 값의 수에 주의해야 하며, 특히 json 객체로 항목을 지정하는 경우 시리즈별로 지정된 기본 속성 이름들과 다른 경우 반드시 값에 해당하는 필드명을 지정해 줘야 한다.

const config = {
    series: {
        openField: 'openPrc',
        lowField: 'lowPrc',
        highField: 'highPrc',
        closeField: 'closePrc',
        data: [
            {
                openProc: 234,
                lowPrc: 123,
                highPrc: 456
                closeProc: 345,
            },
            ...
        ]
    }
}

RcChartData

시리즈 설정의 data 속성에 값 목록을 직접 지정하는 대신, 데이터를 저장하고 관리하는 외부 객체를 연결해서 그 객체가 가지고 있는 데이터를 표시할 수 있는데, RealChart.createData 함수를 호출해서 RcChartData 객체를 생성하고, 시리즈의 data 속성에 설정할 수 있다.

Try Chart Data

const data = RealChart.createData('main', [
    ['신흥1동', 3904],
    ['신흥2동', 19796],
    ['신흥3동', 10995],
    ['태평1동', 14625],
    ['태평2동', 14627],
    ['태평3동', 12649],
    ['태평4동', 12279],
]);
const config = {
    series: {
        type: 'bar',
        data: data
    }
};
chart = RealChart.createChart(document, 'realchart', config);

위와 같이 값들을 배열로 지정하면 'x', 'y', 'z' 순서대로 필드값을 갖는 데이터행들이 생성되는 데, data 객체 생성 시 필드명을 지정해 주는 것이 좋다. 특히 3개 이상의 값을 사용하는 시리즈를 위해서는 반드시 필드 이름들을 지정해야 한다.

const data = RealChart.createData('main', [...], {
    fields: ['x', 'y', 'z']
});

값들이 json 객체로 지정되는 경우 객체의 속성들이 필드명이 된다.

데이터포인트 변경

데이터포인트 값은 api을 통해 직접 변경할 수 있고, 값 변경은 바로 차트에 반영된다.

Try Update Point

const x = 'google';
const v = chart.series.getValueAt(x);
chart.series.updatePoint(x, v + 100);

RcChartSeries.getValueAt은 지정한 x값을 갖는 첫번째 데이터포인트의 y값을 리턴한다. 이 후 RcChartSeries.updatePoint 호출로 값을 변경할 수 있다.

데이터포인트 추가/삭제

api를 통해 데이터포인트(들)를 추가하거나 기존 데이터포인트(들)를 제거할 수도 있다. 데이터포인트 하나를 추가하려면 RcChartSeries.addPoint를 호출한다.

Try Add & Remove

const x = getName();
const y = getValue();
chart.series.addPoint([x, y]);

데이터포인트 정보를 배열로 지정하고 RcChartSeries.addPoints를 사용해서 복수개의 데이터포인트를 동시에 추가할 수도 있다.

const pts = getPoints();
chart.series.addPoints(pts);

RcChartSeries.removePoint 호출로 x값에 해당하는 첫번째 데이터포인트를 삭제할 수 있다.

const x = getName();
chart.series.removePoint(x);

삭제할 x값들을 배열로 지정해서 여러 데이터포인틀 한꺼번에 제거할 수 있다.

const names = getNames();
chart.series.removePoints(names);