๊ฐ€์ด๋“œ
Category Axis

Category Axis

์ถ•์„ ๋ช‡ ๊ฐœ์˜ ๋ฒ”์ฃผ(category)๋กœ ๋ถ„ํ• ํ•ด์„œ ๊ฐ ๋ฒ”์ฃผ์— ์—ฐ๊ฒฐ๋œ ์‹œ๋ฆฌ์ฆˆ์˜ ๋ฐ์ดํ„ฐํฌ์ธํŠธ๋“ค์„ ๋ฒ”์ฃผ ๋‚ด์— ๋ฐฐ์น˜ํ•œ๋‹ค. ๊ฐ ์นดํ…Œ๊ณ ๋ฆฌ๋Š” ๊ฒฉ๋ฆฌ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์นดํ…Œ๊ณ ๋ฆฌ ํ•˜๋‚˜๊ฐ€ 1์˜ ๊ฐ’์„ ๊ฐ–๋Š”๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐœ๋ณ„ ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋„ˆ๋น„(๊ฐ„๊ฒฉ)๋‚˜ ์นดํ…Œ๊ณ ๋ฆฌ๋“ค ์‚ฌ์ด์˜ ์ˆœ์„œ๋Š” ํฌ๊ธฐ(๊ฐ’)๋กœ๋Š” ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๊ฐ€ ์—†๋‹ค.
์นดํ…Œ๊ณ ๋ฆฌ ์ค‘์•™์ด ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” ์œ„์น˜์ด๊ณ  ์ถ•์— ์—ฐ๊ฒฐ๋œ ๋ฐ์ดํ„ฐํฌ์ธํŠธ๋“ค์ด ๊ทธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ‘œ์‹œ๋œ๋‹ค. ๋ชจ๋“  ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋„ˆ๋น„๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ๋™์ผํ•˜์ง€๋งŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
์ฐจํŠธ ์„ค์ •์—์„œ x์ถ•์˜ type์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์‹œ๋ฆฌ์ฆˆ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ์นดํ…Œ๊ณ ๋ฆฌ ์ถ•์œผ๋กœ ์ž๋™ ์„ค์ •๋œ๋‹ค. 'bar', 'circlebar', 'candlestick', 'dumbbell', 'lollipop', 'equazlier', 'waterfall', 'heatmap' ์‹œ๋ฆฌ์ฆˆ๋“ค์ด category x์ถ•์— ํ‘œ์‹œ ๊ฐ€๋Šฅํ•˜๋‹ค. ๋‘˜ ์ด์ƒ์˜ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ์กด์žฌํ•  ๋•Œ ์ด ์‹œ๋ฆฌ์ฆˆ๋“ค ์ข…๋ฅ˜๊ฐ€ ์•„๋‹Œ ๊ฒƒ์ด ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉด 'linear'๋กœ ์ƒ์„ฑ๋œ๋‹ค. ๋ฌผ๋ก , ์ถ• 'type'์ด ์„ค์ •๋˜๋ฉด ๊ทธ ์ข…๋ฅ˜๋Œ€๋กœ ์ƒ์„ฑ๋œ๋‹ค.
์นดํ…Œ๊ณ ๋ฆฌ ์ถ• label์—๋Š” ์ˆซ์ž ๋Œ€์‹  ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋Œ€ํ‘œํ•˜๋Š” ์ด๋ฆ„์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ์ถ• label์— ๋Œ€ํ‘œ ์ด๋ฆ„์„ ํ‘œ์‹œํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด 'linear' ๋Œ€์‹  ์นดํ…Œ๊ณ ๋ฆฌ ์ถ•์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค.

์„ค์ •

์ถ•์˜ type์„ ๋ช…์‹œ์ ์œผ๋กœ "category"๋กœ ์ง€์ •ํ•˜๊ฑฐ๋‚˜, type์„ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ , "categories" ๋ฐฐ์—ด์„ ์„ค์ •ํ•ด๋„ ์นดํ…Œ๊ณ ๋ฆฌ ์ถ•์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค. categories ๋ชฉ๋ก์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด, ์—ฐ๊ฒฐ๋œ ์‹œ๋ฆฌ์ฆˆ๋“ค์˜ data๋กœ๋ถ€ํ„ฐ ๋ชฉ๋ก์„ ์ƒ์„ฑํ•œ๋‹ค.
ํ•˜์ง€๋งŒ, 'categories' ๋ชฉ๋ก์„ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ  ์ถ•์— ์—ฐ๊ฒฐ๋œ ์‹œ๋ฆฌ์ฆˆ๋“ค๋กœ๋ถ€ํ„ฐ ์นดํ…Œ๊ณ ๋ฆฌ ๋ชฉ๋ก์„ ์ž๋™ ์ƒ์„ฑํ•˜๋ฉด, ์‹œ๋ฆฌ์ฆˆ๋“ค์ด ๋ชจ๋‘ ์‚ฌ๋ผ์ง€๋Š” ๊ฒฝ์šฐ ์นดํ…Œ๊ณ ๋ฆฌ ๋ชฉ๋ก ์—ญ์‹œ ์‚ฌ๋ผ์ง€๋ฏ€๋กœ, ๊ธฐ๋Œ€ํ•˜๋Š” ์นดํ…Œ๊ณ ๋ฆฌ ๋ชฉ๋ก์„ ๊ณ ์ • ํ‘œ์‹œํ•˜๋ ค๋Š” ๊ฒฝ์šฐ 'categories' ๋ชฉ๋ก์„ ๋ช…์‹œ์ ์œผ๋กœ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
์นดํ…Œ๊ณ ๋ฆฌ์ถ• ๋˜ํ•œ 2์ฐจ์› ์ขŒํ‘œ๊ณ„์˜ ์ถ•์ด๋ฏ€๋กœ ์ถ• ์ƒ์˜ ๊ฐ’์„ ๊ฐ€์ ธ์•ผ ํ•˜๋Š”๋ฐ, ์ƒ์„ฑ๋œ ๋ชฉ๋ก์˜ ์ฒซ๋ฒˆ์งธ ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ฐ’์ด 0์ด๊ณ , ์นดํ…Œ๊ณ ๋ฆฌ ์˜์—ญ ์ค‘๊ฐ„ ์ง€์ ์ด ์นดํ…Œ๊ณ ๋ฆฌ ๊ฐ’์˜ ํ‘œ์‹œ ์œ„์น˜๊ฐ€ ๋œ๋‹ค.

const config = {
  xAxis: {
    type: 'category',
  },
};
const config = {
    xAxis: [{
        name: 'axis1',
        categories: ["์„ฑ๋‚จ์‹œ", "์šฉ์ธ์‹œ", ...]
    }, {
        name: 'axis2',
    }]
};

์นดํ…Œ๊ณ ๋ฆฌ ์ถ•์— ์—ฐ๊ฒฐ๋œ ์‹œ๋ฆฌ์ฆˆ๋Š” data ์„ค์ •์—์„œ ๋ฐ์ดํ„ฐํฌ์ธํŠธ๋งˆ๋‹ค ์—ฐ๊ฒฐํ•  category๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

See Also