๐Ÿ“Š ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šด ๊ฒƒ๋“ค - 1

chart making

๋ถ€์ŠคํŠธ์บ ํ”„ ํ•™์Šต์Šคํ”„๋ฆฐํŠธ ๋งˆ์ง€๋ง‰ ๋ฏธ์…˜์—๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ฐจํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋‚ด์šฉ์ด ์žˆ์—ˆ๋‹ค. canvas ์™€ svg ์ค‘์— ์„ ํƒํ•ด์„œ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ ์ด๋ฒˆ ๊ธฐํšŒ์— ๋‘˜๋‹ค ์จ๋ณด๊ณ  ์ง์ ‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋งŒ๋“ค์–ด๋ณด์ž! ๋ผ๋Š” ๊ฐœ์ธ์ ์ธ ์š•์‹ฌ์ด ์ƒ๊ฒผ๋‹ค. ๊ทธ๋ ‡๊ฒŒ Interactive-chart ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ œ์ž‘์„ ์™„๋ฃŒํ•˜์˜€๊ณ  ๋งŒ๋“ค๋ฉด์„œ ์Šต๋“ํ•œ ๊ฒƒ์„ ๊ณต์œ ํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.

์ง€์‹๋ณด๋‹ค๋Š” ๊ฒฝํ—˜์˜ ์˜์กดํ•˜๋ฏ€๋กœ ์ •๋ณด๊ฐ€ ์ฃผ๊ด€์ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ‹€๋ฆฐ ์ •๋ณด ์ œ๋ณด๋Š” ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค!

Table of Contents

1. canvas vs svg

canvas์™€ svg์˜ ์ฐจ์ด์ ๊ณผ ๊ฐ๊ฐ ์–ด๋–ค ๊ฒฝ์šฐ์— ์จ์•ผํ•˜๋Š”์ง€๋Š” ์ธํ„ฐ๋„ท์— ์ •๋ง ๋งŽ์ด ํผ์ ธ์žˆ์ง€๋งŒ ๊ธ€ ์„œ๋‘์—๋„ ์–ธ๊ธ‰ํ–ˆ๋“ฏ, ๊ฒฝํ—˜์œผ๋กœ ์˜์กดํ•ด์„œ ๋‚ด ์ƒ๊ฐ์„ ์ ์–ด๋ณด๋ คํ•œ๋‹ค.

๋จผ์ € canvas๋Š” ํ•˜๋‚˜์˜ image์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋ ค์•ผํ•  ๋ฐ์ดํ„ฐ๊ฐ€ ์—„~์ฒญ ๋งŽ๊ฑฐ๋‚˜ ์ธํ„ฐ๋ž™์…˜์ด ์ž์ฃผ ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ ์ ํ•ฉํ•˜๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, ์ฃผ์‹์ฐจํŠธ์ฒ˜๋Ÿผ ๋ช‡๋…„์น˜ ๋ฐ์ดํ„ฐ๊ฐ€ ํ™”๋ฉด์— ๋‹ค ํ‘œ์‹œ๋˜์–ด์•ผํ•  ๊ฒฝ์šฐ, ๋ช‡ ์ฒœ๊ฐœ์˜ element๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ณด๋‹ค ํ•˜๋‚˜์˜ ์—˜๋ฆฌ๋จผํŠธ์— ํ”ฝ์…€๋กœ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ผ ๊ฒƒ์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  svg์˜ ๊ฒฝ์šฐ, ๋ฒกํ„ฐ๊ทธ๋ž˜ํ”ฝ์ด๊ธฐ ๋•Œ๋ฌธ์— ์—˜๋ฆฌ์–ด์‹ฑ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ์›์ด๋‚˜ ๊ณก์„ ๊ฐ™์€ ๋„ํ˜•์„ ๊ทธ๋ฆด ๋•Œ ์ ํ•ฉํ•˜๊ณ , JavaScript๋กœ element๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ๋ณ€ํ˜• ์ž‘์—…์„ ํ•˜๊ธฐ๋„ ์šฉ์ดํ•˜๋‹ค.

๋‚˜๋Š” ์ด๋Ÿฌํ•œ ํŠน์„ฑ์„ ๋ฐ˜์˜ํ•ด ์ „์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ๋‘ ๋ณด์—ฌ์ฃผ๋Š” Line Chart์—๋Š” canvas๋ฅผ, ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„ ํผ์„ผํŠธ๋ฐ์ดํ„ฐ๋ฅผ ์›ํ˜•์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” Pie Chart์—๋Š” svg๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜์˜€๋‹ค.

2. Line Chart class ์„ค๊ณ„

์šฐ์„  Line Chart๋ฅผ ๊ฐ์ฒด๋กœ ์ถ”์ƒํ™”์‹œํ‚ค๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ canvas์— ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๋Š” ๊ณผ์ •๋“ค์„ ๋ฉ”์†Œ๋“œ๋กœ ํ•˜๋‚˜ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์ฃผ์—ˆ๋‹ค.

1. constructor

export default class Line {
  constructor(chartProps: ChartProps) {
    this.initProps(chartProps)
    this.insertHTML()
    this.initElement()
    this.initStyle()
    this.initChart()
    this.initMinimap()
    this.drawChart(this.moveX)
    this.drawMinimap(this.moveX)
    this.addEventListener()
  }
  ...
}

Line Class๊ฐ€ ์ธ์Šคํ„ด์Šคํ™”๋˜๋ฉด ๋™๊ธฐ์ ์œผ๋กœ ์ด 9๋ฒˆ์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ฒŒ ํ•˜์˜€๋‹ค. ์ฒ˜์Œ๋ถ€ํ„ฐ ์ด๋ ‡๊ฒŒ ์„ค๊ณ„ํ•œ ๊ฑด ์•„๋‹ˆ๊ณ , ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๋ฉด์„œ ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋ฉ”์†Œ๋“œ๋กœ ์—ญํ• ์„ ๋‚˜๋ˆ ์ฃผ์—ˆ๋‹ค.

์ ์  ๋ฉ”์†Œ๋“œ ๋‚ด์˜ ์ฝ”๋“œ๋„ ๊ธธ์–ด์กŒ๋Š”๋ฐ, ๋ฉ”์†Œ๋“œ๋ฅผ ํ™”๋ฉด์— ๋ณด์ด์ง€ ์•Š๋„๋ก ์ ‘์–ด๋‘˜ ์ˆ˜๊ฐ€ ์žˆ๋Š” vscode ์ ‘๊ธฐ๊ธฐ๋Šฅ์„ ์ด์šฉํ•˜๋‹ˆ๊นŒ ๊ทธ๋‹ค์ง€ ์ž‘์—…์ด ์–ด๋ ต์ง€๋Š” ์•Š์•˜๋‹ค.

2. initProps

Props๋ฅผ ๊ฐ€์ ธ์™€ ์ฐจํŠธ ๋ฐ์ดํ„ฐ์— ๋งž๊ฒŒ ๋ณ€ํ™˜

initProps์—์„œ๋Š” Props์— ๋„˜์–ด์˜จ ์ •๋ณด๋“ค์„ ์‹ค์ œ ์ฐจํŠธ field๋กœ ๋„ฃ์–ด์ฃผ๋Š” ๋‹จ๊ณ„๋กœ, selector๋ช…์ด๋‚˜, ์ฐจํŠธ์ด๋ฆ„, Props ์— ๋„˜์–ด์˜จ data๋ฅผ ์ฐจํŠธ๊ฐ€ ๊ทธ๋ฆฌ๊ธฐ ์‰ฌ์šด ๋ฐ์ดํ„ฐํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•ด์„œ field์— ์ €์žฅํ•ด์ฃผ์—ˆ๋‹ค.

3. insertHTML

ํ•„์š”ํ•œ element ์ƒ์„ฑ ๋ฐ ์‚ฝ์ž…

ํ•„์š”ํ•œ ์—˜๋ฆฌ๋จผํŠธ๋“ค์„ ๋ฌธ์ž์—ด๋กœ root ์—˜๋ฆฌ๋จผํŠธ์— ์‚ฝ์ž…ํ•ด์ฃผ์—ˆ๋‹ค. ์—˜๋ฆฌ๋จผํŠธ๋“ค์€ ๋‚˜์ค‘์— ์ธํ„ฐ๋ž™์…˜์„ ์œ„ํ•ด์„œ ๊ณ ์œ ์˜ selector๋ฅผ ๊ฐ€์ ธ์•ผํ–ˆ๋Š”๋ฐ Props๋กœ ๋„˜์–ด์˜จ root ์„ ํƒ์ž ์ด๋ฆ„๊ณผ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์ด์šฉํ•ด์„œ ๊ณ ์œ ์˜ selector๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์—ˆ๋‹ค.

4. initElement

element์— ์ ‘๊ทผํ•ด์„œ this.elements์— ์ €์žฅ

๋‚˜์ค‘์— element์— ์ ‘๊ทผํ•˜๊ธฐ ์‰ฝ๊ณ  ๋‹ค์‹œ ํƒ์ƒ‰ํ•˜๋Š” ๋ถˆํ•„์š”ํ•œ ์ž‘์—…์„ ํ•˜๊ธฐ ์‹ซ์–ด์„œ ํ•œ๊บผ๋ฒˆ์— elements์— ์ €์žฅํ•ด์ฃผ์—ˆ๋‹ค.

5. initStyle

element๋“ค์— ์Šคํƒ€์ผ ๋ถ€์—ฌ

element ์Šคํƒ€์ผ์€ ๋ชจ๋‘ ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋กœ ์ ์šฉํ•ด์ฃผ์—ˆ๋‹ค. ์šฐ์„ ์€ ์„ ํƒ์ž๊ฐ€ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ์„ ํƒ์ž ์ด๋ฆ„์— ๋งž๊ฒŒ ๋งŒ๋“ค์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— CSS๋กœ ์ž‘์—…ํ•˜๊ธฐ ์• ๋งคํ–ˆ๊ณ , ์ธ๋ผ์ธ์œผ๋กœ ํ•˜๋ฉด ์„ ํƒ์ž ์ค‘๋ณต์œผ๋กœ ์ธํ•œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ํ™•๋ฅ ๋„ ์ ์–ด์„œ element.style์„ ์ด์šฉํ•ด์„œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์ฃผ์—ˆ๋‹ค.

6. initChart, initMinimap

์ฐจํŠธ, ๋ฏธ๋‹ˆ๋งต ๊ด€๋ จ ํฌ๊ธฐ ์ •๋ณด ์ดˆ๊ธฐํ™”

canvas ์—˜๋ฆฌ๋จผํŠธ์— width, height๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ์ž‘์—…๊ณผ canvas์˜ ์‹ค์ œํฌ๊ธฐ (DOM ํฌ๊ธฐ)๋ฅผ ๊ณ„์‚ฐํ•ด์„œ ์ €์žฅํ•ด์ฃผ๋Š” ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์˜€๋‹ค.

7. drawChart, drawMinimap

์‹ค์ œ ๋“œ๋กœ์ž‰

canvas.getContext(โ€˜2dโ€™)๋ฅผ ์ด์šฉํ•ด์„œ ์‹ค์ œ๋กœ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๋Š” ๋ฉ”์†Œ๋“œ.

8. addEventListener

์ฐจํŠธ ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ์ถ”๊ฐ€

๋งˆ์šฐ์Šค ์ด๋™๋ถ€ํ„ฐ ๋“œ๋ž˜๊ทธ๊นŒ์ง€ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์—ฌ๊ธฐ์„œ ๋“ฑ๋กํ•ด์ฃผ์—ˆ๋‹ค.

#. ์„ค๊ณ„ ์…€ํ”„ํ”ผ๋“œ๋ฐฑ

9๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ„๊ธดํ–ˆ์ง€๋งŒ ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ณ  ๋ฉ์น˜๊ฐ€ ์ปค์ง€๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๊ธฐ ๋ถˆํŽธํ•ด์กŒ๋‹ค. ๊ทธ๋ž˜๋„ ์ปค๋ฒ„ํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์˜ ์ž‘์—…์ด์–ด์„œ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ์ž‘์—…์„ ํ•˜๊ธด ํ–ˆ์ง€๋งŒ, draw๋ถ€๋ถ„์ด๋‚˜ event๋ถ€๋ถ„์€ ๋”ฐ๋กœ ํŒŒ์ผ์„ ๋ถ„๋ฆฌํ•ด์„œ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

๋˜ํ•œ, ์ƒ์ˆ˜๋“ค๋„ ์ „์—ญ์œผ๋กœ ๋นผ์ฃผ๋ฉด ๋” ์ข‹์„ ํ…๋ฐ, ๋ฉ”์†Œ๋“œ ๋‚ด์—์„œ ์„ ์–ธํ•˜์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ณณ๊ณณ์— ๋งค์ง๋„˜๋ฒ„๋„.. ์•„์ง ์กด์žฌํ•œ๋‹ค. ๐Ÿ˜…

chart making2

๐Ÿ‘† drawChart ๋ฉ”์†Œ๋“œ์—์„œ ๋ณ€์ˆ˜๋“ค์ด ์„ ์–ธ๋˜๊ณ  ์žˆ๋‹ค..(ใ… )

ํ”„๋กœ์ ํŠธ ์ „์ฒด ๋ฐ๋“œ๋ผ์ธ์ด 2์ฃผ์˜€๊ณ , ๊ทธ ์•ˆ์— ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊นŒ์ง€ ๋งŒ๋“ค์–ด์„œ ์ ์šฉ๊นŒ์ง€ ํ–ˆ์–ด์•ผํ•ด์„œ, ๊ตฌํ˜„์œ„์ฃผ๋กœ ์ง„ํ–‰ํ–ˆ๊ณ  ์„ฑ๋Šฅ์€ ํ•˜๋‚˜๋„ ๊ณ ๋ ค๋ฅผ ๋ชปํ–ˆ๋‹ค. (ใ… ใ…  x100) ๊ทผ๋ฐ ๊ตฌํ˜„์ž์ฒด๊ฐ€ ๋ชฉํ‘œ์˜€๊ณ , ๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ ๋””์ž์ธ ๊ทธ๋Œ€๋กœ ๋งŒ๋“  ๊ฒƒ ๊ฐ™์•„์„œ ๋งŒ์กฑํ•œ๋‹ค!

3. LineChart(canvas)๋ฅผ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šด๊ฒƒ๋“ค

์ด๋ฒˆ์— Line Chart๋ฅผ ๋งŒ๋“ค๋ฉด์„œ canvas์— ๋Œ€ํ•ด์„œ๋„ ๋” ๋งŽ์ด ์•Œ๊ฒŒ ๋˜์–ด์„œ ์ข‹์•˜๋‹ค.

1. canvas.width์™€ canvas.style.width๋Š” ๊ฐ™์„๊นŒ?

canvas๋„ ์ด๋ฏธ์ง€์ธ์ง€๋ผ ์‹ค์ œํฌ๊ธฐ์™€ ํ•ด์ƒ๋„๊ฐ€ ๋ณ„๋„๋กœ ์กด์žฌํ–ˆ๋‹ค. canvas์˜ width,height ์†์„ฑ์€ ํ•ด์ƒ๋„๋ฅผ ์˜๋ฏธํ•˜๊ณ , canvas ์—˜๋ฆฌ๋จผํŠธ์˜ style๊ฐ’์˜ width๋Š” ์‹ค์ œํฌ๊ธฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ๊ธฐ๋ณธ ํ•ด์ƒ๋„๋Š” 300 x 150์ด๋ฉฐ, ๊ณ ํ•ด์ƒ๋„์˜ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๋ ค๋ฉด ๋ณ„๋„๋กœ width, height๋ฅผ ๋ถ€์—ฌํ•ด์ฃผ์–ด์•ผํ•œ๋‹ค.

svg๋„ ํ…Œ์ŠคํŠธํ•ด๋ดค๋Š”๋ฐ ๋ฒกํ„ฐ๋ผ ๊ทธ๋Ÿฐ์ง€ width์™€ style.width๊ฐ€ ์˜ค๋ฒ„๋ผ์ด๋”ฉ ๋˜๋ฉด์„œ ํ•˜๋‚˜๋งŒ ์ ์šฉ๋˜์—ˆ๋‹ค.

2. canvas๋Š” ํ”„๋ ˆ์ž„ ์ž‘์—…์„ ์ง์ ‘ ํ•ด์ค˜์•ผํ•จ

DOM์˜ ๊ฒฝ์šฐ translate๋‚˜ scale๊ฐ™์€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž‘์—…์„ ํ•˜๋ฉด ์„ ํƒ๋œ ์—˜๋ฆฌ๋จผํŠธ๋งŒ ๋ณ€ํ™”ํ•˜๊ณ  ๋ฐฐ๊ฒฝ(๋‚˜๋จธ์ง€ ์—˜๋ฆฌ๋จผํŠธ๋“ค)์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณ€๊ฒฝ๋œ ์—˜๋ฆฌ๋จผํŠธ๋งŒ ๋ณ€๊ฒฝ๋˜๋„๋ก ์ž๋™์œผ๋กœ ํ•ด์ฃผ์ง€๋งŒ, canvas๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ํ•  ๊ฒฝ์šฐ, ๋ฐฐ๊ฒฝ์„ ๋ฎ์–ด์”Œ์›Œ ์˜ํ–ฅ์„ ์ค˜๋ฒ„๋ฆฐ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ๊ฒฝ์„ ๊ธฐ์–ตํ•ด์„œ ๋‹ค์‹œ ๊ทธ๋ ค์ค€๋‹ค๋˜์ง€ ํ•ด์ค˜์•ผํ•œ๋‹ค.

์‹ค์ œ๋กœ canvas API์—๋Š” save, restore๋กœ ์ƒํƒœ๋ฅผ ์Šคํƒ์œผ๋กœ ์ €์žฅํ•ด๋‘˜ ์ˆ˜ ์žˆ๋‹ค.

3. ๋น„๋ก€์‹

์ด๋ฒˆ Line Chart์˜ ๊ฒฝ์šฐ ๋น„๋ก€์‹์ด ๋˜๊ฒŒ ๋งŽ์ด ์“ฐ์˜€๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, ์ฐจํŠธ๋ฅผ ํด๋ฆญํ•˜๊ณ  ๋งˆ์šฐ์Šค๋ฅผ ์กฐ๊ธˆ ์›€์ง์˜€์„ ๋•Œ, ์‹ค์ œ ๋งˆ์šฐ์Šค๊ฐ€ ์›€์ง์ธ ๊ฑฐ๋ฆฌ๋ฅผ ์‹ค์ œ ์ฐจํŠธ์˜ ํ•ด์ƒ๋„์˜ ๋น„์œจ๋กœ ๋ฐ”๊ฟ”์ค˜์•ผํ–ˆ๊ณ , ๋ฏธ๋‹ˆ๋งต๋„ ๋ฐ”๊ฟ”์ค˜์•ผํ•ด์„œ ๋ฏธ๋‹ˆ๋งต์˜ ํ•ด์ƒ๋„์˜ ๋น„์œจ๋กœ๋„ ๋ฐ”๊ฟ”์ค˜์•ผํ–ˆ๋‹ค. ๊ทผ๋ฐ ์ฐจํŠธ์™€ ๋ฏธ๋‹ˆ๋งต์€ ๋ชจ๋‘ canvas ๋‚ด๋ถ€์˜ ์ž์ฒด ํŒจ๋”ฉ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์„œ ์–˜๋„ค๋“ค๋„ ๋‹ค ๊ณ„์‚ฐํ•ด์ฃผ์–ด์•ผํ–ˆ๋‹ค.

chart making3

์ฐจํŠธ์™€ ๋ฏธ๋‹ˆ๋งต์ด ์„œ๋กœ ๋ฐ”์ธ๋”ฉ๋˜์–ด์žˆ์–ด์„œ ์ฐจํŠธ์—์„œ ์ผ์–ด๋‚œ ์ด๋ฒคํŠธ๋Š” ๋ฏธ๋‹ˆ๋งต์—๋„ ์ ์šฉ๋˜๊ณ , ๋ฏธ๋‹ˆ๋งต์— ์ ์šฉ๋œ ์ด๋ฒคํŠธ๋Š” ์ฐจํŠธ์—๋„ ์ ์šฉ๋œ๋‹ค.

์ฒ˜์Œ์—๋Š” ํ•˜๋‚˜ํ•˜๋‚˜ ๊ณ„์‚ฐํ•˜๋‹ค๊ฐ€ ๋‚ด ๋จธ๋ฆฌ์˜ ํ•œ๊ณ„๋ฅผ ๋Š๋ผ๊ณ  ๋”ฐ๋กœ ์œ ํ‹ธํ•จ์ˆ˜๋กœ ๋นผ์„œ ๊ณ„์‚ฐ์ด ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์„œ ์จ์ฃผ์—ˆ๋‹ค. ์—ญ์‹œ, ๋ฐ”ํ€ด๋ฅผ ๊ณ„์† ๋ฐœ๋ช…ํ•  ํ•„์š”๊ฐ€ ์—†๋Š”๋ฐ ๊ดœํ•œ ๊ณ ์ƒ์„ ๊ณ„์† ํ–ˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์•˜๋‹ค.ใ… 

// ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณธ resize utils
export const trueLengthToCanvasLength = (trueLength, canvasSize, trueSize) => {
  return (trueLength * canvasSize) / trueSize
}

export const canvasLengthToTrueLength = (
  canvasLength,
  canvasSize,
  trueSize
) => {
  return (canvasLength / canvasSize) * trueSize
}

export const chartLengthToMinimapLength = (
  chartLength,
  chartSize,
  minimapSize,
  visibleRatio
) => {
  return chartLength * (minimapSize / chartSize) * visibleRatio
}

export const minimapLengthToChartLength = (
  minimapLength,
  chartSize,
  minimapSize,
  visibleRatio
) => {
  return ((minimapLength / minimapSize) * chartSize) / visibleRatio
}

๊ณ„์† ์ˆ˜ํ•™์ ์ธ ๊ณ„์‚ฐ์„ ํ•  ํ•„์š”์—†์ด, ์œ ํ‹ธํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด๋‘๋ฉด ํ•จ์ˆ˜๋ช…๊ณผ ํŒŒ๋ผ๋ฏธํ„ฐ๋งŒ ์ ์ ˆํžˆ ๋„ฃ์–ด์ฃผ๊ธฐ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค.

4. tooltip ๋งŒ๋“ค๊ธฐ

๋งˆ์šฐ์Šคํฌ์ธํ„ฐ์—๋”ฐ๋ผ ์ด๋™ํ•˜๋Š” x์ถ•, y์ถ• ์ ์„ ๊ณผ ํ˜„์žฌ ๋งˆ์šฐ์Šคํฌ์ธํ„ฐ๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ (vertext)์— ๋Œ€ํ•œ ์ •๋ณด๋Š” canvas๋ฅผ ์ด์šฉํ•˜์ง€ ์•Š๊ณ  DOM element๋ฅผ ์ด์šฉํ•ด์„œ ๋งŒ๋“ค์—ˆ๋‹ค. ์‚ฌ์‹ค ์ „๋ถ€๋‹ค canvas๋กœ ํ‘œํ˜„ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์‹ค์ œ ์ฐจํŠธ๋Š” canvas๋กœ๋งŒ ํ‘œํ˜„ํ•˜๊ณ , ๊ทธ์™ธ์˜ tooltip์€ ๋”ฐ๋กœ DOM element๋กœ ๋งŒ๋“œ๋Š” ๊ฒŒ ์—ญํ• ๋„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๊ณ , ๊ตฌํ˜„ํ•˜๊ธฐ์—๋„ ๋” ์ˆ˜์›”ํ•  ๊ฒƒ ๊ฐ™์•˜๋‹ค.

4. ํ”„๋กœ์ ํŠธ ๋ณต๊ธฐํ•˜๋ฉด์„œ ๋Š๋‚€์ 

์˜ˆ์ „ ๋‚˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณต๊ธฐํ•˜๋ฉด์„œ ์ œ์ผ ๋งŽ์ด ๋Š๊ผˆ๋˜ ์ ์€ ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ๋‚ด๊ฐ€ ์“ด ์ฝ”๋“œ๋„ ๊นŒ๋จน๋Š”๋‹ค๋Š” ์ ์ด์—ˆ๋‹ค..!! ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ๊ธฐ๊ฐ„๋„ ์งง๊ฒŒ ์žก๊ณ  ๋ชจ๋“  ์ •์‹ ์ด ๊ฑฐ๊ธฐ์— ๋ชฐ์ž…์ด ๋˜์–ด์žˆ์–ด์„œ ํ•˜๋ฃจ๊ฐ€ ์ง€๋‚˜์„œ ๋‹ค์‹œ ์ฝ”๋“œ๋ฅผ ๋ด๋„ ๋‹ค ์ดํ•ดํ•˜๊ณ , ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ•  ๋•Œ๋„ ์–ด๋”œ ๊ณ ์ณ์•ผํ• ์ง€ ๋ฐ”๋กœ๋ฐ”๋กœ ๋‚˜์™”๋Š”๋ฐ, ๋‘๋‹ฌ์ด ์ง€๋‚œ ์ง€๊ธˆ๋ณด๋‹ˆ๊นŒ ๋‚ด๊ฐ€ ์ง  ์ฝ”๋“œ์˜€์–ด๋„ ์ฝ๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฝค ๊ฑธ๋ ธ๋‹ค. ์ฝ”๋“œ๋ฅผ ์ž˜ ๋ชป์งœ์„œ ๊ทธ๋Ÿฐ ๊ฒƒ์ผ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ์–ด์จ‹๋“  ์ธ๊ฐ„์€ ๋ง๊ฐ์˜ ๋™๋ฌผ์ด๋‹ˆ๊นŒ ํ”„๋กœ์ ํŠธ์ง„ํ–‰ ์ค‘์ด๋‚˜ ํ˜น์€ ๋งˆ๋ฌด๋ฆฌํ•˜๋Š” ์‹œ์ ์—, ๊ผญ ๋ณต๊ธฐํ•˜๋ฉด์„œ ๋ฌธ์„œํ™”ํ•ด๋‘๋Š” ๊ฒŒ ์ข‹๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

์„ ๋ฐฐ๊ฐœ๋ฐœ์ž๋ถ„๋„ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ, ์ธ์ˆ˜์ธ๊ณ„๋ฅผ ์—ผ๋‘์— ๋‘๊ณ  ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ๋ง์”€ํ•ด์ฃผ์…จ๋Š”๋ฐ ๊ทธ ๋ง์”€์˜ ์˜๋„๋ฅผ ํ™•์‹คํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ ๋ณต๊ธฐ, ๋ฌธ์„œ์ •๋ฆฌ๋Š” ํƒ€์ธ์ด ์•„๋‹ˆ์—ฌ๋„ ๋ฏธ๋ž˜์˜ ๋‚˜์—๊ฒŒ๋กœ์˜ ์ธ์ˆ˜์ธ๊ณ„๋ฅผ ์œ„ํ•ด์„œ๋„ ๊ผญ! ํ•ด์ฃผ์ž. ๐Ÿ‘

๊ธ‰ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์„œ ์•„์‰ฌ์šด์ ๋„ ๋งŽ๊ณ  ๊ฐœ์„ ์ ๋„ ๋„ˆ๋ฌด๋„ˆ๋ฌด ๋งŽ์ด ๋ณด์ด์ง€๋งŒ, ๊ธฐ์กด์— ์žˆ๋Š” ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ง์ ‘ canvas์™€ svg๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ฐจํŠธ๋ฅผ ๋งŒ๋“  ๊ฒฝํ—˜์€ canvas, svg์— ๋Œ€ํ•œ ๊ณตํฌ(?)๋ฅผ ์ค„์—ฌ์ฃผ์—ˆ๊ณ , ์•ž์œผ๋กœ canvas๋‚˜ svg๋ฅผ ์“ธ ์ผ์ด ์žˆ์„ ๋•Œ, ํฐ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค!!


PS. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” canvas๋ฅผ ์ด์šฉํ•œ Line Chart๋งŒ ๋‹ค๋ค˜์ง€๋งŒ, ๋‹ค์Œ์—๋Š” svg๋ฅผ ์ด์šฉํ•œ Pie Chart์— ๋Œ€ํ•ด์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ด์•ผ๊ฒ ๋‹ค.! (๋ณต๊ธฐ๋ฅผ ๋ฏธ๋ฆฌ๋ฏธ๋ฆฌ ํ•ด๋‘์ž!๐Ÿ˜‚)


Written by@taenyKim
์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ / Learn in Public

GitHubFacebook