๊ฐ€์ด๋“œ
Linear Axis

Linear Axis

๊ฐ’๋“ค์ด ๊ท ์ผํ•œ ๊ฐ„๊ฒฉ์œผ๋กœ ๋ฐฐ์น˜๋œ๋‹ค. ์ฆ‰, ๊ฐ’ ์‚ฌ์ด์˜ ๋น„์œจ๊ณผ ์ถ• ๊ธธ์ด ๋น„์œจ์ด ์–ด๋Š ์œ„์น˜์—์„œ๋‚˜ ํ•ญ์ƒ ๋™์ผํ•˜๊ณ , ๋˜ ๊ฐ’์ด ์—ฐ์†๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐํฌ์ธํŠธ๋“ค์ด ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š” ๋นˆ ๊ตฌ๊ฐ„๋“ค์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ๋‹ค. (๋ฐ์ดํ„ฐํฌ์ธํŠธ์™€ lable์˜ ๊ฐœ์ˆ˜๋ฅผ ์ •ํ™•ํžˆ ๋งž์ถ”๋ ค๋ฉด 'category' ์ถ•์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค)
๋ช…์‹œ์ ์œผ๋กœ ์ถ• type์„ ์ง€์ •ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ y์ถ•์œผ๋กœ ๊ธฐ๋ณธ ์„ค์ •๋˜๋Š” ์ถ•์ด๋‹ค. x์ถ•์—์„œ๋„ category ์ถ•๋กœ ์ƒ์„ฑ๋  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ์ด๋ฉด ์ด ์ถ•์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค.

์„ค์ •

์ถ•์˜ ์ข…๋ฅ˜๋ฅผ "linear"๋กœ ์ง€์ •ํ•œ๋‹ค.

const config = {
  xAxis: {
    type: 'linear',
  },
};

linear ์ถ•์€ ์นดํ…Œ๊ณ ๋ฆฌ ์ถ•๊ณผ ๋‹ฌ๋ฆฌ ๋ช…์‹œ์ ์œผ๋กœ ์ถ• ์ƒ์˜ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ๋ช‡ ๊ฐœ์˜ tick๋“ค์„ ํ‘œ์‹œํ•ด์„œ ๋ฐ์ดํ„ฐํฌ์ธํŠธ์˜ ์œ„์น˜๋ฅผ ์ง์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฐ, tick ๊ตฌ์„ฑ์— ๋Œ€ํ•œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. tick๋“ค์„ ๋ฐฐ์น˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  ์ถ•์˜ ๋ฒ”์œ„๊ฐ€ ๊ฒฐ์ •๋ผ์•ผ ํ•œ๋‹ค.

์ถ• ๋ฒ”์œ„(์ตœ์†Œ/์ตœ๋Œ€๊ฐ’)

์ถ• ํ‘œ์‹œ ๋ฒ”์œ„๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ถ•์— ์—ฐ๊ฒฐ๋œ ์‹œ๋ฆฌ์ฆˆ๋“ค์˜ ๊ฐ’์„ ๋ชจ๋‘ ์ˆ˜์ง‘ํ•œ ํ›„ ๊ณ„์‚ฐ๋œ ๊ฐ’๊ณผ, minPadding, maxPadding ์„ค์ • ๊ฐ’์œผ๋กœ ์ž๋™ ๊ฒฐ์ •๋œ๋‹ค. ํ•˜์ง€๋งŒ, ์‹œ๋ฆฌ์ฆˆ๋“ค์˜ ๊ฐ’๊ณผ ์ƒ๊ด€์—†์ด ์˜๋„ํ•œ ๋ฒ”์œ„๊ฐ€ ์žˆ๋‹ค๋ฉด ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ ๋ฒ”์œ„๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
minValue, maxValue๋Š” ๊ฐ๊ฐ ์ตœ์†Œ/์ตœ๋Œ€๊ฐ’์— ๋Œ€ํ•œ ํžŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์ฆ‰, ๊ณ„์‚ฐ๋œ ์ตœ์†Œ๊ฐ’์ด minValue๋ณด๋‹ค ํฌ๋ฉด ์ตœ์†Œ๊ฐ’์ด minValue๋กœ ์„ค์ •๋˜๊ณ , ๊ณ„์‚ฐ๋œ ์ตœ๋Œ€๊ฐ’์ด maxValue๋ณด๋‹ค ์ž‘์œผ๋ฉด ์ตœ๋Œ€๊ฐ’์ด maxValue๋กœ ์„ค์ •๋œ๋‹ค. ์ด๋ ‡๊ฒŒ ์„ค์ •๋œ ์ตœ์†Œ/์ตœ๋Œ€๊ฐ’์— minPadding, maxPadding์ด ์ ์šฉ๋œ๋‹ค.
stricMin, strictMax๋Š” ๊ณ„์‚ฐ๋œ ๊ฐ’์„ ๋ฌด์‹œํ•˜๊ณ  ์ตœ์†Œ/์ตœ๋Œ€๊ฐ’์œผ๋กœ ์„ค์ •๋˜๋ฉฐ, minPadding, maxPadding๋„ ๋ฌด์‹œ๋œ๋‹ค.

Tick ๋ฐฐ์น˜

์ถ• ๋ฒ”์œ„๊ฐ€ ๊ฒฐ์ •๋˜๋ฉด tick ๋ฐฐ์น˜๊ฐ€ ํ•„์š”ํ•œ๋ฐ, ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ์ถ• tick ๋ชจ๋ธ์˜ stepPixels์— ์„ค์ •๋œ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฐ€๋Šฅํ•œ 10 ๋ฐฐ์ˆ˜์˜ ๊ฐ’์ด ๋˜๋„๋ก tick๋“ค์„ ์ƒ์„ฑํ•œ๋‹ค. tick ๋ชฉ๋ก์„ ์ƒ์„ฑํ•˜๋Š” ์šฐ์„  ์ˆœ์œ„๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  1. steps์— ๋ช…์‹œ์ ์ธ ์Šคํ… ๋ชฉ๋ก์ด ์žˆ์œผ๋ฉด ๊ทธ๋Œ€๋กœ ํ‘œ์‹œํ•œ๋‹ค.
  2. baseAxis๊ฐ€ ์„ค์ •๋˜๋ฉด base ์ถ•์˜ tick ๊ฐœ์ˆ˜๋Œ€๋กœ ์ƒ์„ฑํ•œ๋‹ค.
  3. stepCount์— ์„ค์ •๋œ ๊ฐœ์ˆ˜๋Œ€๋กœ ์ƒ์„ฑํ•œ๋‹ค.
  4. tickInterval์— ์„ค์ •๋œ ๊ฐ’ ๊ฐ„๊ฒฉ์œผ๋กœ tick๋“ค์„ ์ƒ์„ฑํ•œ๋‹ค.
  5. ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ stepPixels๊ณผ ๋Œ€๋žต ๋น„์Šทํ•œ ๊ฐ„๊ฒฉ๋Œ€๋กœ tick๋“ค์„ ์ƒ์„ฑํ•œ๋‹ค.
  6. ์œ„ ์†์„ฑ๋“ค์ด ํ•˜๋‚˜๋„ ์„ค์ •๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ์ตœ์†Œ, ์ตœ๋Œ€ ์œ„์น˜์— ๋‘ ๊ฐœ ํ˜น์€ ํ•œ ๊ฐœ์˜ tick์„ ์ƒ์„ฑํ•œ๋‹ค.

See Also