์ฐจํธ ์ค์ (Configuration)
RealChart๋ ์ฐจํธ ๊ตฌ์ฑ ์์๋ค์ ๋ฐฐ์น ์ ๋ณด์ ์คํ์ผ๋ค์ด ์ง์ ๋ JSON (opens in a new tab) ์ค์ ๊ฐ์ฒด๋ฅผ ์ด์ฉํ์ฌ ์์ฑ๋๋ค.
const config = {
type: 'bar',
polar: false,
inverted: false,
gaugeType: 'circle',
templates: {},
assets: {},
options: {},
title: {},
subtitle: {},
xAxis: [],
yAxis: [],
series: [],
gauges: [],
annotations: [],
legend: {},
body: {},
seriesNavigator: {},
split: {}
};
const chart = RealChart.createChart(document, 'div', config);
์ต์์ ์์ฑ๋ค
์ฐจํธ ๊ธฐ๋ณธ ํํ์ ์๋ฆฌ์ฆ ๋ฐ ๊ฒ์ด์ง์ ๊ธฐ๋ณธ ์ข
๋ฅ ๋ฑ์ ์ต์์์์ ๋ฐ๋ก ์ง์ ํ๋ค.
์ต์์ ์์ฑ๋ค ํ์ด์ง๋ฅผ ์ฐธ์กฐํ๋ค.
const config = {
// ๊ธฐ๋ณธ ์๋ฆฌ์ฆ ์ข
๋ฅ
type: 'bar',
// ๊ธฐ๋ณธ ๊ฒ์ด์ง ์ข
๋ฅ
gaugeType: 'circle'
// ๊ทน์ขํ ์ฌ์ฉ ์ฌ๋ถ.
polar: false,
// x, y์ถ์ ์์น๋ฅผ ๋ฐ๊ฟ์ ํ์
inverted: false,
}
์ฐจํธ ์์ค ์ต์ ๋ค
์ฐจํธ ์ ์ฒด์ ์ํฅ์ ์ฃผ๋ ์์ฑ๋ค์ ์ง์ ํ๋ค.
์ฐจํธ ์ต์
ํ์ด์ง๋ฅผ ์ฐธ์กฐํ๋ค.
const config = {
options: {
// ์ ๋๋ฉ์ด์
์คํ ์ฌ๋ถ
animatable: true;
// ํ
๋ง ์ด๋ฆ
theme: '',
// ์๋ฆฌ์ฆ ๋ฐ ๋ฐ์ดํฐํฌ์ธํธ์ ์ ์ฉ๋๋ ๊ธฐ๋ณธ ์์ ํ๋ ํธ ์ด๋ฆ.
palette: '',
// palette๋ก ์ง์ ๋ ํ๋ ํธ ์์๋ค์ ์๋ฆฌ์ฆ์ ์ ์ฉํ๋ ๋ฐฉ์.
paletteMode = 'normal',
// ๋ณต์ axis๊ฐ ํ์๋๋ ๊ฒฝ์ฐ axis ์ฌ์ด์ ๊ฐ๊ฒฉ
axisGap = 8,
// ํฌ๋ ๋ง ์ค์
credits = {}
}
}
์์ (Assets)
์๋ฆฌ์ฆ๋ ๊ฒ์ด์ง ๋๋ ์ถ label ๋ฑ์ ํ์ํ ๋ ์ฐธ์กฐํ๋ ๋ฏธ๋ฆฌ ์ ์๋ ์คํ์ผ ์์๋ค์ 'asset'์ด๋ 'assets' ๋ชฉ๋ก์ผ๋ก ์ค์ ํ๋ค.
{
assets: [{
type: 'colors',
id: 'color1',
colors: ['#88f', '#aaf', '#bbf', '#ddf', '#eef'],
}]
}
์ฐจํธ ์ ๋ชฉ๋ค(Titles)
์ฃผ/๋ถ ๋ ๊ฐ์ ํ์ดํ์ ๋ค์ํ ์คํ์ผ๊ณผ ๋ฐฉ์์ผ๋ก ๋ฐฐ์นํ ์ ์๋ค.
ํ์ดํ๋ฐ ๋ถ ํ์ดํ ํ์ด์ง๋ฅผ ์ฐธ์กฐํ๋ค.
const config = {
// ์ฃผ ์ ๋ชฉ
title: {
},
// ๋ฌธ์์ด๋ก ์ง์ ํ๋ฉด ํ์ดํ์ text๋ก ์ง์ ๋๋ค.
title: 'Title',
// ๋ถ ์ ๋ชฉ
subtitle: {
}
}
X ์ถ
'xAxes' ๋๋ 'xAxis' ์ด๋ฆ์ผ๋ก ํ๋ ์ด์์ X์ถ(๋ค)์ ์ค์ ํ๋ค.
์ถ์ 'category', 'linear', 'time', 'log' ๋ฑ ๋ค๊ฐ์ง ์ข
๋ฅ๊ฐ ์๊ณ ,
๊ณตํต ์์ฑ ์ธ์ ์ข
๋ฅ๋ณ๋ก ๋ค๋ฅธ ์์ฑ๋ค์ด ์ถ๊ฐ ํฌํจ๋๋ค.
๋ ์ด์์ X์ถ์ array๋ก ์ค์ ํ๋ค.
const config = {
xAxis: [{
}, {
}]
}
Y ์ถ
'yAxes' ๋๋ 'yAxis' ์ด๋ฆ์ผ๋ก ํ๋ ์ด์์ Y์ถ(๋ค)์ ์ค์ ํ๋ค.
์ถ์ 'category', 'linear', 'time', 'log' ๋ฑ ๋ค๊ฐ์ง ์ข
๋ฅ๊ฐ ์๊ณ ,
๊ณตํต ์์ฑ ์ธ์ ์ข
๋ฅ๋ณ๋ก ๋ค๋ฅธ ์์ฑ๋ค์ด ์ถ๊ฐ ํฌํจ๋๋ค.
๋ ์ด์์ Y์ถ์ array๋ก ์ค์ ํ๋ค.
const config = {
yAxis: [{
}, {
}]
}
์๋ฆฌ์ฆ
์๋ฆฌ์ฆ๋ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ์ฐจํธ์ ๊ธฐ๋ณธ ๊ตฌ์ฑ์์์ด๋ค.
'bar', 'linear', 'area', 'pie' ๋ฑ ๋ช ์ญ ์ข
๋ฅ์ ์๋ฆฌ์ฆ๊ฐ ์์ผ๋ฉฐ,
์๋ฆฌ์ฆ ๊ณตํต ์์ฑ ์ธ์ ์ข
๋ฅ๋ณ๋ก ์ถ๊ฐ ์์ฑ๋ค์ด ์กด์ฌํ ์ ์๋ค.
๋ ์ด์์ ์๋ฆฌ์ฆ๋ ๋ฐฐ์ด๋ก ์ค์ ํ๋ค.
const config = {
series: [{
}, {
}]
}
๊ฒ์ด์ง
๊ฒ์ด์ง๋ ๋จ์ผ ๊ฐ์ ํ์ํ๋ ์ฐจํธ์ ๊ธฐ๋ณธ ๊ตฌ์ฑ์์์ด๋ค.
'circle', 'linear' ๋ฑ ๋ช ์ข
๋ฅ์ ๊ฒ์ด์ง๊ฐ ์์ผ๋ฉฐ,
๊ฒ์ด์ง ๊ณตํต ์์ฑ ์ธ์ ์ข
๋ฅ๋ณ๋ก ์ถ๊ฐ ์์ฑ๋ค์ด ์กด์ฌํ ์ ์๋ค.
'gauges' ๋๋ 'gauge' ์ด๋ฆ์ผ๋ก ํ๋ ์ด์์ ๊ฒ์ด์ง(๋ค)์ ์ค์ ํ๋ค.
๋ ์ด์์ ๊ฒ์ด์ง๋ ๋ฐฐ์ด๋ก ์ค์ ํ๋ค.
const config = {
gauges: [{
}, {
}]
}
์ด๋ ธํ ์ด์
์ด๋
ธํ
์ด์
์ ์๋ฆฌ์ฆ๋ ๊ฒ์ด์ง์ ๊ด๋ จ๋ ๋ถ๊ฐ์ ์ธ ์ ๋ณด(ํ
์คํธ๋ ์ด๋ฏธ์ง)๋ฅผ ํ์ํ๋ ์ฐจํธ ๊ตฌ์ฑ ์์์ด๋ค.
'annotations' ๋๋ 'annotation' ์ด๋ฆ์ผ๋ก ํ๋ ์ด์์ ์ด๋
ธํ
์ด์
(๋ค)์ ์ค์ ํ๋ค.
๋ ์ด์์ ์ด๋
ธํ
์ด์
์ ๋ฐฐ์ด๋ก ์ค์ ํ๋ค.
const config = {
annotations: [{
}, {
}]
}
๋ฒ๋ก(Legend)
์ฐจํธ ์๋ฆฌ์ฆ ๊ตฌ์ฑ์ ์ง๊ด์ ์ผ๋ก ์ดํดํ ์ ์๋๋ก ๋์์ฃผ๋ ๊ตฌ์ฑ ์์์ ๋ํ ์์ฑ๋ค์ ์ค์ ํ๋ค.
const config = {
legend: {
}
}
Body
์๋ฆฌ์ฆ๋ ๊ฒ์ด์ง๊ฐ ํ์๋๋ ์ฐจํธ ๋ณธ์ฒด ์์ญ(plotting area)์ ๋ํ ์์ฑ๋ค์ ์ค์ ํ๋ค.
const config = {
body: {
}
}
Split
์ฐจํธ ๋ณธ์ฒด๋ฅผ ํ๋ ์ด์์ ํ๊ณผ ์ด๋ก ๋ถํ ํด์ ๋ณด๋ค ๋ค์ํ ๋ฐฐ์น๋ก ์๋ฆฌ์ฆ์ ๊ฒ์ด์ง๋ฅผ ํ์ํ ์ ์๋ค.
const config = {
split: {
}
}