Highcharts: ํƒ€์ดํ”„์Šคํฌ๋ฆฝํŠธ .d.ts

์— ๋งŒ๋“  2015๋…„ 12์›” 23์ผ  ยท  47์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: highcharts/highcharts

npm ํŒจํ‚ค์ง€(์˜ˆ: angular ) ๋‚ด์—์„œ Highcharts์šฉ Typescript์— ๋Œ€ํ•œ ์ •์˜๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

High Docs Enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด ๋ฌธ์ œ๊ฐ€ ๋†’์€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋˜์—ˆ์Œ์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๋ชจ๋“  47 ๋Œ“๊ธ€

TypeScript์˜ ์ธ๊ธฐ๊ฐ€ ๋†’์•„์ง์— ๋”ฐ๋ผ ์ด๊ฒƒ์ด ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋งŽ์€ js ํŒจํ‚ค์ง€๋Š” ์ด์ œ ์ž์ฒด (๊ณต์‹) ํƒ€์ดํ•‘์„ ํฌํ•จํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ™•์‹คํžˆ Typed ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋งก๊ธฐ๊ธฐ ๋ณด๋‹ค๋Š”

์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ๊ณ ๋ คํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. API ๋คํ”„ ์—์„œ ๋…ธ๋“œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž๋™ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋„ +1 ๐Ÿ‘. Highcharts v4.2.x ์ดํ›„์— ์‚ฐ๋ฐœ์ ์ด๊ณ  ๋ถ€์ˆ˜์ ์ธ ์†์„ฑ๋งŒ ์—…๋ฐ์ดํŠธ๋œ ํ™•์‹คํžˆ Typed ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๊ฐ€ ๊ตฌ์‹์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Highcarts์˜ ๋Œ€๋ถ€๋ถ„์˜

๋”ฐ๋ผ์„œ ํ™•์‹คํžˆ Typed ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฑฐ๋‚˜ ๋” ํŽธ๋ฆฌํ•˜๊ฒŒ Highcharts์™€ ํ•จ๊ป˜ ๋ฒˆ๋“ค๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋” ์ข‹์€ ์†”๋ฃจ์…˜์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ž๋™ ์ƒ์„ฑ๋˜๋Š” ๊ฒƒ์€ ํ›Œ๋ฅญํ•œ ์˜ต์…˜์ฒ˜๋Ÿผ ๋“ค๋ฆฌ์ง€๋งŒ .d.ts ํŒŒ์ผ์— ๋Œ€ํ•œ ํ…Œ์ŠคํŠธ ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ์—ฌ์ „ํžˆ ์ˆ˜๋™ ์ž‘์—…์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜ํ•œ ์ž๋™ ์ƒ์„ฑ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ํ™•์‹คํžˆ ํ˜„์žฌ ๋ฆด๋ฆฌ์Šค๋กœ ํ™•์‹คํžˆ ์œ ํ˜• ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐ ์•ฝ๊ฐ„์˜ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์˜ํ–ฅ์ด ์žˆ์œผ๋ฉฐ ๊ฑฐ๊ธฐ์— ์ˆ˜๋™ ํŒŒ์ผ์„ ํฌํ•จํ•˜๋ ค๋ฉด https://github.com/highcharts/highcharts ์—์„œ PR์„ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

/cc @ry8806 @TorsteinHonsi

^ ๋‚˜๋Š” Highcharts v5.0.10 ์„ Typed repo๋ฅผ ์œ„ํ•œ PR์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์ด ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์—์„œ ์ถ”๊ฐ€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(ํ•œ ๋ฒˆ ๋ฐ ๋ณ‘ํ•ฉ๋˜๋Š” ๊ฒฝ์šฐ). ์ ์–ด๋„ ๋‹น๋ถ„๊ฐ„์€ TypeScript ์ •์˜ ํŒŒ์ผ์ด Highcharts ์ž์ฒด์™€ ํ•จ๊ป˜ ๋ฐฐํฌ๋  ๋•Œ๊นŒ์ง€์ž…๋‹ˆ๋‹ค.

๊ณต์‹ TypeScript ์œ ํ˜• ์ •์˜๊ฐ€ ์žˆ์œผ๋ฉด ๋งค์šฐ ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฐจํŠธ ๊ตฌ์„ฑ์„ ์ž…๋ ฅํ•  ๋•Œ ๋งŽ์€ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” ํ˜„์‹ค ๋’ค์— ์žˆ๋Š” ์ฃผ์š” ๋ฒ„์ „์˜ ์œ ํ˜• ์ •์˜๋ฅผ ๋‹ค์‹œ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. :/

์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ณต์žก์„ฑ์„ ๊ฐ์•ˆํ•  ๋•Œ ๊ฐ€์žฅ ์ข‹์€ ์†”๋ฃจ์…˜์€ @TorsteinHonsi๊ฐ€ ์ฐธ์กฐํ•œ "API ๋คํ”„" ์—์„œ ์œ ํ˜• ์ •์˜๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ•ด๋‹น ๋งํฌ๊ฐ€ ๊นจ์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๊ธฐ๊บผ์ด ์ œ๋„ˆ๋ ˆ์ดํ„ฐ๋ฅผ ์ž‘์„ฑํ•  ๊ฒƒ์ด๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํ•ด๋‹น ๋งํฌ๊ฐ€ ๊นจ์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์˜ˆ, ์ƒˆ๋กœ์šด ๊ฒƒ์€ https://api.highcharts.com/highcharts/tree.json ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

@cvasseng ์ฐธ๊ณ ๋กœ.

@TorsteinHonsi ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. "jsdoc"(Google Closure, JSDoc 3)์˜ ํŠน์ • ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? JSON ๋คํ”„๊ฐ€ ์ฐธ์กฐ์šฉ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ด ์ฝ”๋“œ ๊ธฐ๋ฐ˜์˜ ์–ด๋”˜๊ฐ€์—์„œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๊นŒ? ๋‚ด๊ฐ€ ๋ฌป๋Š” ์ด์œ ๋Š” ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์กด JSDoc-to-TSDef ๋ณ€ํ™˜๊ธฐ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค...

์šฐ๋ฆฌ๋Š” JSDoc 3์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ง€๋งŒ ์„ ์–ธ์  ์˜ต์…˜ ๊ตฌ์กฐ๋ฅผ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋„๋ก ํฌ๊ฒŒ ํ™•์žฅ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

@TorsteinHonsi JSON์„ ๋ณด๋ฉด ๋ช‡ ๊ฐ€์ง€ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค... ํ˜น์‹œ ์ด ํ˜•์‹์— ๋Œ€ํ•œ ์Šคํ‚ค๋งˆ ๋ฌธ์„œ๊ฐ€ ์—†์Šต๋‹ˆ๊นŒ? ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์ˆ˜์ง‘ํ•œ ๊ฒƒ ์ž…๋‹ˆ๋‹ค. Highcharts.setOptions() ๋Œ€ Highcharts.chart() ๋กœ ์ „๋‹ฌ๋˜๋Š” ์˜ต์…˜์„ ์–ด๋–ป๊ฒŒ ์ง€์ •ํ•ฉ๋‹ˆ๊นŒ(์˜ˆ:)? ํด๋ž˜์Šค ๋ฐ ๋„ค์ž„์ŠคํŽ˜์ด์Šค์— ๋Œ€ํ•œ API ๋คํ”„๋„ ์žˆ์Šต๋‹ˆ๊นŒ?

@cvasseng

@aaronbeall ๋‹˜ , ํ˜„์žฌ๋กœ์„œ๋Š” ์Šคํ‚ค๋งˆ์— ๋Œ€ํ•œ ์™„์ „ํ•œ ๋ฌธ์„œ๊ฐ€ ์—†์ง€๋งŒ ์ •์˜์— ๋ชจ๋‘ ํฌํ•จ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Highcharts.setOptions() ๋Œ€ํ•œ ์˜ต์…˜๊ณผ ์‹œ๋ฆฌ์ฆˆ๋Š” ๋ชจ๋‘ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์Šคํ‚ค๋งˆ ์ž์ฒด ์™ธ๋ถ€์˜ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ๋กœ ์ฒ˜๋ฆฌ๋˜์ง€๋งŒ ์ตœ์†Œํ•œ global ๋ฐ lang ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์˜ต์…˜ ๊ตฌ์กฐ ์™ธ๋ถ€.

์ฐธ๊ณ ๋กœ ์ด์ „ ๋คํ”„ ํ˜•์‹์€ https://api.highcharts.com/dump.json ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์œผ๋ฉฐ ์ด์ œ https://api.highcharts.com/highcharts/ ์˜ ์›๋ž˜ ์œ„์น˜๋กœ ๋‹ค์‹œ ์ด๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

@cvasseng ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์„ ๋•œ์งˆํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๊ณ  ์žˆ๋‹ค... ๋งŽ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜๋ฅผ ์œ„ํ•ด ์ž˜๋ผ๋ƒˆ๋‹ค. :) ์ผ๋ถ€ ํ•„๋“œ์—๋Š” ์œ ํ˜•์ด ์—†๊ณ  boost.seriesThreshold ์™€ ๊ฐ™์ด ์œ ํ˜•์„ ์œ ์ถ”ํ•  ๊ธฐ๋ณธ๊ฐ’์ด ์—†์ง€๋งŒ ์œ ํ˜• ์ด docs ์— ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค . ์ด๊ฒƒ๋“ค์€ ํŠน๋ณ„ํ•œ ๊ฒฝ์šฐ๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ์ œ๊ฐ€ ๋†“์นœ ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜ํ•œ ๋„ค์ž„์ŠคํŽ˜์ด์Šค/ํด๋ž˜์Šค์— ๋Œ€ํ•œ API ์Šคํ‚ค๋งˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ๋ณ„๋„๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๊นŒ? ์„ ์–ธ์  ๋ชจ๋ธ์€ ๊ทธ๊ฒƒ๋“ค์„ ์“ธ๋ชจ์—†๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

(์งˆ๋ฌธ์ด ๋” ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•ด ๋” ์ž˜ ๋…ผ์˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณณ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์ง€ํ„ฐ? ์ €๋Š” ์—ฌ๊ธฐ ๊ดœ์ฐฎ์ง€๋งŒ ์ผ๋ถ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ์†Œ์Œ์ด ๊ฝค ํด ๊ฒƒ์ž…๋‹ˆ๋‹ค.)

boost.seriesThreshold ์˜ ์œ ํ˜•์€ ์‹ค์ œ๋กœ tree.json (๋ฐ ๋ผ์ด๋ธŒ ๋ฌธ์„œ)์—์„œ ์ž˜๋ชป๋œ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ๋ฌธ์ž์—ด์ด ์•„๋‹ˆ๋ผ ์ˆซ์ž์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์„ฑ๋œ ์‹ค์ œ doclet์„ ๋ณด๋ฉด ์œ ํ˜•์ด ๋ˆ„๋ฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์œ ํ˜•์ด ๋ˆ„๋ฝ๋œ ๋‹ค๋ฅธ ๋ชจ๋“  ์žฅ์†Œ์—์„œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” doclet์ด ์ด๋Ÿฌํ•œ ์ผ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ณ€๊ฒฝ๋  ๋•Œ ์ด๋ฅผ ์ž๋™์œผ๋กœ ์ฐพ๊ธฐ ์œ„ํ•ด ์ƒ์„ฑ ๋‹จ๊ณ„์— ๋” ๋งŽ์€ ํ…Œ์ŠคํŠธ ๋ฐ ๊ฒ€์‚ฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ์ž‘์—…์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋„ค์ž„์ŠคํŽ˜์ด์Šค/ํด๋ž˜์Šค์— ๋Œ€ํ•œ ์Šคํ‚ค๋งˆ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์ง€๋งŒ ๊ทธ๊ฒƒ๋“ค์€ ๋ฐ”๋‹๋ผ JSDoc 3์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ ๊ธฐ์กด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์ด์— ๋Œ€ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ •์˜๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ถ€๋ถ„์— ๋Œ€ํ•œ ์„ค์ •์€ https://github.com/highcharts/highcharts-docstrap ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์—์„œ ์ด๊ฒƒ์„ ๋…ผ์˜ํ•˜๋Š” ๊ฒƒ์€ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. :) ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๋„ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ๋„๋ก ์ค‘์•™ ๊ณต๊ณต ์žฅ์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„์›€ ์ด ๋˜๋Š” ๊ฒฝ์šฐ ์œ ํ˜•์ด ์—†๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด๋Š” ๋ชจ๋“  ํ•„๋“œ(highcharts/tree.json์— ์žˆ์Œ) type ์†์„ฑ ๋˜๋Š” default ์†์„ฑ์ด๋ฏ€๋กœ any ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์œ ํ˜•์— ๋Œ€ํ•œ ํŒจ์น˜ ํŒŒ์ผ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์ตœ์ƒ์œ„ JSON ๋ฐ mapNavigation.buttons ์—๋„ ๋นˆ ํ‚ค๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์˜ค๋Š˜ ์ด๊ฒƒ์— ๋Œ€ํ•ด ์•ฝ๊ฐ„์˜ ์ง„์ „์„ ์ด๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ์—์„œ ์žˆ์Šต๋‹ˆ๋‹ค . ์ด ๊ณ ํ’ˆ์งˆ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋งŽ์€ ์ž‘์—…์ด ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด์ผ repo๋กœ ํ‘ธ์‹œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋†’์€ ์ˆ˜์ค€์—์„œ ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์ถœ๋ ฅ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ Highcharts.Options ๋ฐ Series ์™€ ๊ฐ™์€ ๋งค์šฐ ๊ตฌ์ฒด์ ์ธ ์ž‘์€ ๊ฐœ์ฒด์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ PlotOptionsBbTopLine ์™€ ๊ฐ™์€ ์ค‘์š”ํ•œ ํ•ญ๋ชฉ์„ ํฌํ•จํ•˜๋Š” 559๊ฐœ์˜ ๊ธฐํ˜ธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฆ„ ์ถฉ๋Œ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ์ „์ฒด ์ด๋ฆ„์„ PascalCase๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: plotOptions.bb.topLine . ์—ฌ์ „ํžˆ ์ด๊ฒƒ์„ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„ ๋‚ด๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ์˜ @types/highcharts ์™€ ๋น„๊ตํ•˜๋Š” ๊ฒƒ์€ ์•ฝ๊ฐ„ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋ฌผ๊ฑด์ด ๊ฑฐ๊ธฐ์— ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋” ๋งŽ์Šต๋‹ˆ๋‹ค.
  • highcharts/highstocks/highmaps์˜ ๊ด€๊ณ„๋ฅผ ์ดํ•ดํ•˜๊ณ  ์žˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. (์ €๋Š” ๊ฐœ์ธ์ ์œผ๋กœ Highchart๋งŒ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.) API ๋คํ”„์— ๋ชจ๋“  ์ œํ’ˆ์˜ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ? ์–ด๋–ป๊ฒŒ ๋‚˜๋ˆ„์–ด์•ผ ํ• ๊นŒ์š”? ํ”„๋กœ์ ํŠธ์—์„œ ์‹ค์ œ๋กœ highstock ๋ฐ highmaps ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋” ์ž˜ ์ดํ•ดํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค...
  • ๊ฐ์ฒด๊ฐ€ ์„œ๋กœ ํ™•์žฅ๋˜๋Š” ๋ฐฉ์‹์€ ์™„๋ฒฝํ•˜์ง€๋งŒ ํ•ฉ๋ฆฌ์ ์ธ ์œ ํ˜•์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๋Š” ๋ฐ ์–ด๋ ค์›€์„ ๊ฒช๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ extends ๊ฐ€ ํ˜ธํ™˜๋˜์ง€ ์•Š๋Š” ํ™•์žฅ์— ๋Œ€ํ•œ ๋งŽ์€ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ์ฒด๊ฐ€ & ๊ต์ฐจ ์œ ํ˜•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ‘ํ•ฉ๋ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ excludes ์ฒ˜๋ฆฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. Omit ์œ ํ˜•์œผ๋กœ ํ”Œ๋ ˆ์ดํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์ง€๋งŒ plotOptions.mfi.params ๋Š” ์ด๊ฒƒ์˜ ์˜ˆ์ด๋ฉฐ index ์ œ์™ธํ•˜์ง€๋งŒ index ์†์„ฑ ๋˜๋Š” extends ์†์„ฑ์„ ๊ฐ–์ง€๋งŒ ๋ถ€๋ชจ plotOptions.mfi ์—ฐ์žฅ plotOptions.sma ์ž์‹์„ ๊ฐ–๋Š”๋‹ค plotOptions.sma.params ๊ฐ–๋Š” ์†์„ฑ index ์œผ๋กœ ์ƒ์œ„์— ๋ณ‘ํ•ฉ๋˜๋Š” plotOptions.mfi.params . ๋„ค, ์•„์ง๋„ ์ด๊ฑธ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผ ํ• ์ง€ ๋ง‰๋ง‰ํ•ฉ๋‹ˆ๋‹ค. :) ์™„์ „ํžˆ ๋ณ‘ํ•ฉ๋œ ํŠธ๋ฆฌ๋ฅผ ํ‰๊ฐ€ํ•˜๊ณ  ๊ฑฐ๊ธฐ์—์„œ ์œ ํ˜•์„ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค...
  • ๋งŽ์€ ์ผ๋ฐ˜ Array , Object ๋ฐ Function ์œ ํ˜•... ์•„๋งˆ๋„ ๋ชจ๋‘ ์„ค๋ช…์— ์ž˜ ๋ฌธ์„œํ™”๋˜์–ด ์žˆ์ง€๋งŒ ์œ ํ˜•์—๋Š” ํ‘œํ˜„๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ์œ ํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ์ ์ ˆํžˆ ํŒจ์น˜ํ•˜๋ฉด ์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ๊ฒƒ์€ Array.<Array.<Mixed>> ์ž…๋‹ˆ๋‹ค. ์•„์ง ๋ฌด์—‡์ธ์ง€ ๋ชจ๋ฆ…๋‹ˆ๋‹ค. :)

๊ธฐํƒ€ ํŠน์ • ์‚ฌํ•ญ:

  • Color , CSSObject ๋ฐ Mixed ์œ ํ˜•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? Color ๋Š” ํ˜•์‹์ด ์ง€์ •๋œ string , CSSObject ๋Š” ํ‘œ์ค€ ์Šคํƒ€์ผ ๊ฐœ์ฒด ๋˜๋Š” ํŠน๋ณ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?
  • series.bellcurve.data ๋ฐ series.histogram.data ๋‘˜ ๋‹ค ์ž์ฒด์ ์œผ๋กœ ํ™•์žฅ๋˜์–ด ์ˆœํ™˜ ์ฐธ์กฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ๋‹จ์ง€ ์˜คํƒ€๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋‹ค๋ฅธ ๊ฒƒ์„ ํ™•์žฅํ•˜๊ธฐ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

๋˜ํ•œ API์—์„œ ๋ˆ„๋ฝ๋œ ์œ ํ˜• ์ค‘ ์ผ๋ถ€๊ฐ€ https://api.highcharts.com/highstock/plotOptions.bb.topLine.styles.lineColor). ๋‚ด๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ธฐ์–ตํ•œ๋‹ค๋ฉด api-docs ์ƒ์„ฑ๊ธฐ์—์„œ ์œ ํ˜• ์ถ”์ธก์„ ์ˆ˜ํ–‰ํ•˜์ง€๋งŒ ์ด๊ฒƒ์€ highcharts.jsdoc.js ์Šคํฌ๋ฆฝํŠธ๋กœ ์ด๋™๋˜์–ด tree.json์˜ ์ผ๋ถ€๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@cvasseng ๊ณต์‹ TypeScript ์ •์˜์˜ ์ƒํƒœ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์ด๊ฒƒ์œผ๋กœ ์žฌ์ƒํ•˜๊ธฐ ์œ„ํ•ด ์ €์žฅ์†Œ๋ฅผ ์—…๋กœ๋“œ ํ–ˆ์ง€๋งŒ ์˜ค๋Š˜ ์ถ”๊ฐ€๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ธฐ์–ตํ•œ๋‹ค๋ฉด api-docs ์ƒ์„ฑ๊ธฐ์—์„œ ์ถ”์ธก์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.

api-docs ์ƒ์„ฑ๊ธฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. API ๋คํ”„๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋Š” ์ผ๋“ค์„ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด series.bullet.data.targetOptions series.bullet.targetOptions series.bullet.data.targetOptions ํ™•์žฅํ•˜์ง€๋งŒ series.bullet.targetOptions ๋Œ€ํ•œ ์ •์˜๋Š” ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค... ๊ทธ๋Ÿฌ๋‚˜ ์†์„ฑ ์€ ๋ฌธ์„œ ์—์„œ ์ž˜ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ ๋•Œ๋ฌธ์— ์ถ”์ธก series.bullet ํ™•์žฅ plotOptions.bullet ์žˆ๋Š”์ด plotOptions.bullet.targetOptions , ๊ทธ๋ž˜์„œ series.bullet.targetOptions ๋กœ ํ™•์ธ plotOptions.bullet.targetOptions ?

ํŽธ์ง‘: ์˜ค๋Š˜ ๋ฐค ์•ฝ๊ฐ„์˜ ์ง„์ „์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์— ๋Œ€ํ•œ ์ง„์‹คํ•œ ํ™•์ธ์€ ๋ชจ๋“  ๋ฆฌํ„ฐ๋Ÿด false ๊ฐ’์„ ๋ฒ„๋ฆฌ๊ณ  ์ˆ˜์ •ํ–ˆ์œผ๋ฉฐ ๋” ๋งŽ์€ ํ•ญ๋ชฉ์ด ๋ถ€์šธ๋กœ ์œ ์ถ”๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ถ€์šธ์ด ์ผ๋ถ€ ์žฅ์†Œ์—์„œ ์ถ”๋ก ํ•˜๊ธฐ์— ์˜ฌ๋ฐ”๋ฅธ ์œ ํ˜•์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋˜ํ•œ ๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•์— ๋Œ€ํ•ด values ๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค(์ด ์ •๋ณด๋Š” ๋งค์šฐ ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค!). ์–ด์จŒ๋“  ๋ˆ„๋ฝ๋œ ์œ ํ˜• ๋คํ”„ ๊ฐ€ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

ํŠธ๋ฆฌ๊ฐ€ ๊ฐœ์ฒด๋ฅผ ํ™•์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ƒ๊ฐํ•œ ํ›„ ์•ฝ๊ฐ„์˜ ์ง„์ „์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฌด์—‡ ํ–ฅํ›„ ๊ณ„ํš

  • ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์ „๋žต์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ ์ œ์™ธ ํ•„๋“œ์™€ ๊ฑฐ๋ž˜ Omit<> ์ถ”๊ฐ€ ํŒจ์Šค๋ฅผํ•˜๊ณ  ๋งŒ๋“ค๊ธฐ๋ฅผ ๋ช…์‹œ ์ ์œผ๋กœ extends ๋ชจ๋“  ๊ฐœ์ฒด์— excludes ํ•ฉ๋‹ˆ๋‹ค (์— ์–ธ๊ธ‰ ๋œ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฒซ ๋ฒˆ์งธ ๊ธ€๋จธ๋ฆฌ ๊ธฐํ˜ธ) ๋ฐ ๋ชจ๋“  ์„ ํƒ์  ์†์„ฑ์ด ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๋‹ค์‹œ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค. ์†์„ฑ์ด ๋ชจ๋‘ ์„ ํƒ ์‚ฌํ•ญ์ž„์„ ํ™•์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ํ•œ ์ด๊ฒƒ์ด ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•„์ˆ˜ ์†์„ฑ์ด ์žˆ์Šต๋‹ˆ๊นŒ?
  • ๊ธฐํƒ€ ์„ธ๋ถ€์‚ฌํ•ญ : ์œ ํ˜• ๊ฐœ์„ , ์ •๋ฆฌ ๋ฐ ํ…Œ์ŠคํŠธ
  • ์—ฐํœด ๋๋‚˜๊ณ  ๋‹ค์‹œ ์˜ฌ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐ€๊ณ  ์žˆ๋Š”์ง€ ์•„๋‹Œ์ง€ ์ƒ๊ฐํ•œ๋‹ค๋ฉด ์–ด๋–ค ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์งˆ๋ฌธ

  • tooltipValueFormat doclet์˜ "memberof": "yaxis" ์€(๋Š”) ๋ฌด์—‡์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ?
  • context ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋Š” PlotLineOrBand ์ด์ง€๋งŒ ํด๋ž˜์Šค ๋ฌธ์„œ์—์„œ๋Š” ์ด๊ฒƒ์ด Series ์˜ ํ•˜์œ„ ํด๋ž˜์Šค์ธ์ง€ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
  • plotOptions.series.states ์— doclet ์œ ํ˜• ์ด๋ฆ„ "plotOptions.series.states" -- ํŠน๋ณ„ํ•œ ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

@aaronbeall ์ง„ํ–‰ ์ƒํ™ฉ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜ํ•œ ํ•˜์ด์ฐจํŠธ๋ฅผ ์œ„ํ•œ ์œ ํ˜• ์ƒ์„ฑ์— ๋Œ€ํ•ด ์กฐ๊ธˆ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.

ํ•œ ๊ฐ€์ง€ ์ฃผ์š” ๊ฒฐํ•จ์€ ์ƒ์„ฑ๋œ tree.json ์— highcharts ๋„ค์ž„์ŠคํŽ˜์ด์Šค์˜ ์ •์  ๋ฉ”์„œ๋“œ์™€ ๊ฐ™์€ ๋ชจ๋“  ์œ ํ˜•์˜ highchart๊ฐ€ ํฌํ•จ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์œ ํšจํ•œ ๊ธฐํ˜ธ ์ •๋ฆฌ ํ›„ 703๊ฐœ์˜ ๊ธฐํ˜ธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ ์ดํ›„์—๋Š” tree.json ๋‚ด๋ถ€์˜ ์ถœ๋ ฅ ๊ธฐํ˜ธ๊ฐ€ ์•ฝ 100๊ฐœ์ž…๋‹ˆ๋‹ค. ๊ทธ ์ค‘ ์ƒ๋‹น์ˆ˜๊ฐ€ ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.

@scott-ho ์ƒˆํ•ด์— Highcharts๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ค‘๋‹จํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์กฐ๊ธˆ ์ง€๋‚ฌ์ง€๋งŒ ์ง€๊ธˆ์€ ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ๊ณ  ๊ณง ์ด ํ”„๋กœ์ ํŠธ๋กœ ๋Œ์•„์˜ฌ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚ด ๋งˆ์ง€๋ง‰ ๊ฒŒ์‹œ๋ฌผ์—์„œ ๋‚˜๋Š” ๋ณ€ํ™˜ ๊ฒฝ๋กœ ๋‚ด๋ ค ๊ฐ”๋‹ค type ์— interface ๋ฐ ์‚ฌ์šฉ extends ๋Œ€์‹  & (์ด ์ œ๋Œ€๋กœ ์ง€์›์— ๋‚ด ์ „๋žต์ด์—ˆ๋‹ค tree.json ํŠน์ • ํ•„๋“œ์˜ excludes ) ๋ฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. TS๋Š” ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ์ตœ์†Œํ•œ ๊ณต์œ ํ•˜์ง€ ์•Š๋Š” ๊ฐœ์ฒด ์œ ํ˜•์ธ ํ•„๋“œ ์ด๋ฆ„์„ ๊ณต์œ ํ•˜๋Š” ๋‹ค๋ฅธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 1 ์†์„ฑ. ๋‹ค์Œ์€ ์ถ”์ƒ์ ์ธ ์˜ˆ์ž…๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๊ฒช์—ˆ๋˜ ์ •ํ™•ํ•œ ์˜ˆ๋Š” ์žŠ์–ด๋ฒ„๋ ธ์ง€๋งŒ tree.json ๊ฐœ์ฒด๋ฅผ ์ž์œ ๋กญ๊ฒŒ ํ™•์žฅํ•˜๊ณ (์–ด๋–ค ๊ฒฝ์šฐ์—๋Š” ํ™•์žฅ ์ฒด์ธ์ด 5๋ฅผ ์ดˆ๊ณผํ•จ) ์ž„์˜์˜ ์ง€์ ์—์„œ ํ•„๋“œ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์ œ์™ธํ•˜๋Š” ๋ฐฉ์‹ ๋•Œ๋ฌธ์— ๋งŽ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด & ๊ต์ฐจ๋กœ ์œ ํ˜•์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์ „ ์ ‘๊ทผ ๋ฐฉ์‹์ด ๊ฐ€์žฅ ์ข‹์€ ๊ฒฝ๋กœ์ผ ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ "์ œ์™ธ๋œ" ์ผ๋ถ€ ์†์„ฑ์ด ์‹ค์ œ๋กœ ์œ ํ˜• ํžŒํŠธ์—์„œ ์ œ์™ธ๋œ ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š๊ฒŒ ๋ฉ๋‹ˆ๋‹ค(ํ˜„์žฌ ๋…ธ๋“œ์—์„œ ์ƒ๋žตํ•  ์ˆ˜ ์—†๋Š” ํŠธ๋ฆฌ์˜ ์ƒ์œ„ ํ™•์žฅ๋œ ํ•ญ๋ชฉ์—์„œ ๋ณ‘ํ•ฉ๋˜๊ธฐ ๋•Œ๋ฌธ์—). ํ•˜์ง€๋งŒ ์ €๋Š” ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด ๋ณด์„ธ์š”. ๋ฌธ์„œ๋Š” ๋‹จ์ผ ์ง€์ ์—์„œ ์†์„ฑ์„ ๋ Œ๋”๋งํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€๋งŒ extends ๋ฅผ ๋ฒ„๋ฆฌ๊ณ  ๋Œ€๋ถ€๋ถ„ ์ค‘๋ณต ์œ ํ˜• ์ •์˜๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ ๋Š” ๊ตฌ์กฐ์ ์œผ๋กœ ์œ ํ˜•์„ ์„ค๋ช…ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์œ ํšจํ•œ ๊ธฐํ˜ธ ์ •๋ฆฌ ํ›„ 703๊ฐœ์˜ ๊ธฐํ˜ธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ ์ดํ›„์—๋Š” tree.json ๋‚ด๋ถ€์˜ ์ถœ๋ ฅ ๊ธฐํ˜ธ๊ฐ€ ์•ฝ 100๊ฐœ์ž…๋‹ˆ๋‹ค. ๊ทธ ์ค‘ ์ƒ๋‹น์ˆ˜๊ฐ€ ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๊ฐ€์ง€ ์น˜๊ธฐ ๋ฐฉ๋ฒ•์„ ๋งํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๊นŒ? ์ด ๋ถ€๋ถ„์ด ๊ฐ€์žฅ ๋‹ค๋ฃจ๊ธฐ ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค...

์˜ˆ, ๋˜ํ•œ ํด๋ž˜์Šค/๋„ค์ž„์ŠคํŽ˜์ด์Šค๊ฐ€ tree.json ์„ค๋ช…๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค(๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ์„ ์–ธ์  ์ดˆ๊ธฐํ™” ์˜ต์…˜์„ ์„ค๋ช…ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค). ๊ทธ๋Ÿฌ๋‚˜ @cvasseng ์€ ์ด๊ฒƒ์ด ๋ฐ”๋‹๋ผ jsdoc3 ์ด๋ฏ€๋กœ ํ‘œ์ค€์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•œ ๋ณ€ํ™˜๊ธฐ.

pruning ๋Š” ์ด ์ค„ ์—์„œ ์ฐธ์กฐ๋ฉ๋‹ˆ๋‹ค.

tree.json ๋Œ€ํ•œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘์€ publish ๋ฉ”์„œ๋“œ ์•ˆ์— ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๋ถ€์— jsdoc API๊ฐ€ ์ž˜๋ชป ์‚ฌ์šฉ๋˜์—ˆ์„ ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

jsdoc์˜ ์›๋ณธ ์ถœ๋ ฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ tree.json ์˜ ์ƒˆ ๋ฒ„์ „์„ ์ƒ์„ฑํ•˜๋Š” ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ค๋Š˜์€ tree.json ๋ฌด์—‡์„ ๋‚˜ํƒ€๋‚ด๋Š”์ง€ ์•Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋งˆ์นจ๋‚ด tree.json ๊ฐ€ ์ฐจํŠธ ์˜ต์…˜ ์œ ํ˜•๋งŒ ํ˜ธ์ŠคํŒ…ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๋ƒˆ์Šต๋‹ˆ๋‹ค. https://api.highcharts.com/highcharts/๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค

์œ ํ˜• ์ˆ˜์ง‘ ๋ฐ ์ƒ์„ฑ ๋กœ์ง์€ https://github.com/highcharts/highcharts/blob/master/tools/jsdoc/plugins/highcharts.jsdoc.js์— ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค

์ „์ฒด ๋ฒ„์ „์˜ ์œ ํ˜•์„ ์ง์ ‘ ์ƒ์„ฑํ•˜๊ณ  https://github.com/englercj/tsd-jsdoc ์™€ ์œ ์‚ฌํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค

์ด์— ๋Œ€ํ•œ ETA๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? SureTyped์˜ ์ •์˜๋Š” ๋งค์šฐ ๋”์ฐํ•ฉ๋‹ˆ๋‹ค.

๋ˆ„๋ฝ๋œ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด TypeScript ํŒ€๊ณผ ๋…ผ์˜ํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์…จ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๊ทธ๋“ค์ด Highcharts ํฌ๊ธฐ์˜ ํ”„๋กœ์ ํŠธ์˜ ์š”๊ตฌ ์‚ฌํ•ญ์— ๊ท€๋ฅผ ๊ธฐ์šธ์ด๊ณ  ๋ฆด๋ฆฌ์Šค ์ฃผ๊ธฐ๊ฐ€ ๋‹ค์†Œ ๋น ๋ฅผ ๊ฒƒ์ด๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

@aaronbeall ๋งคํ•‘๋œ ์œ ํ˜•์„ ๋ณด์…จ์Šต๋‹ˆ๊นŒ?

๋‹ค์Œ ์€ ๊ท€ํ•˜์˜ ์˜ˆ์— ๋Œ€ํ•œ ์ˆ˜์ • ์‚ฌํ•ญ ์ด ์žˆ๋Š”

@cvasseng @TorsteinHonsi

๋ˆ„๋ฝ๋œ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด TypeScript ํŒ€๊ณผ ๋…ผ์˜ํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์…จ์Šต๋‹ˆ๊นŒ?

@JannesMeyer ๋ถˆํ–‰ํžˆ๋„ ETA ATM์ด ์—†์Šต๋‹ˆ๋‹ค. ๋‚ด ํ”„๋กœ์ ํŠธ๋Š” ํ™•์‹คํžˆ Highcharts์˜ ๊ณผ๋„ํ•œ ์‚ฌ์šฉ์œผ๋กœ ๋Œ์•„๊ฐ€๊ณ  ์žˆ์ง€๋งŒ ํ˜„์žฌ๋Š” ๋‹ค๋ฅธ ์ž‘์—…์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์‹ค์ œ๋กœ Omit<> ์ž‘์—…์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ์‹์ธ ๋งคํ•‘๋œ ์œ ํ˜•(๋ฐ ์กฐ๊ฑด๋ถ€ ์œ ํ˜•)์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค... , ์™„์ „ํ•œ ์ธ์ฒด ๊ณตํ•™์  ์œ ํ˜• ์ •์˜. ์ •์˜๋Š” ์ตœ์†Œํ•œ์œผ๋กœ ์ •์˜๋˜์–ด์•ผ ํ•˜์ง€๋งŒ(์ฆ‰, ์œ ์‚ฌํ•œ ๊ฐ์ฒด์— ๋Œ€ํ•ด ๋™์ผํ•œ ์†์„ฑ์„ ๋ชจ๋“  ๊ณณ์—์„œ ์žฌ์ •์˜ํ•˜์ง€ ์•Š์Œ) ์•„๋ฌด๊ฒƒ๋„ ๋น ๋œจ๋ฆฌ์ง€ ์•Š์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. Highcharts๊ฐ€ ์ฃผ์–ด์ง„ ์ปจํ…์ŠคํŠธ์—์„œ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์˜ต์…˜์„ ์œ ํ˜• ์™„์„ฑ์— ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์€ ์žˆ์–ด์•ผ ํ•  ๊ฒƒ์„ ๋†“์น˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋ฌธ์ œ๊ฐ€ ์ ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ผ๋ฐ˜ object ๋˜๋Š” any ์œ ํ˜•์„ ์ƒ์„ฑํ•˜๋Š” ๋ฌธ์„œ ์Šคํ‚ค๋งˆ๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๋Š” ๋ฌธ์ œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€ ์œ ํ˜•์„ ๊ธฐ๋กํ•ด์•ผ ํ•˜๋Š” ๊ณณ์—์„œ ์œ ํ˜• ์ƒ์„ฑ์ด ์ด๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋„ค, ์ดํ•ด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. Highcharts ํŒ€์€ ํ˜„์žฌ๋ณด๋‹ค TypeScript๋ฅผ ์กฐ๊ธˆ ๋” ์ˆ˜์šฉํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. jsdoc์—์„œ ๋ฌธ์„œ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋Œ€์‹  ์œ ํ˜• ์ •์˜์—์„œ ๋ฌธ์„œ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ• ๊นŒ์š”?

@JannesMeyer #8307์€ ์ „์ฒด ์œ ํ˜•์˜ Highcharts๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ค‘์ž…๋‹ˆ๋‹ค. ๊ฒ€ํ† ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์„œ ๊ฐœ์„  ์‚ฌํ•ญ์ด ๋ณ‘ํ•ฉ๋˜๋ฉด jsdoc ํ‘œ๊ธฐ๋ฒ•์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ „์ฒด ์œ ํ˜•์„ ์ž๋™ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค๋ฅธ PR์ด ๋ฐœํ–‰๋ฉ๋‹ˆ๋‹ค.

์ด ๊ฒŒ์‹œ๋ฌผ์„ ํŒ”๋กœ์šฐํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์„ ์–ธ ํŒŒ์ผ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ •๋ง ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ €๋Š” React/Typescript ํ”„๋กœ์ ํŠธ์— DefenitelyTyped๋ฅผ ์‚ฌ์šฉํ•ด ์™”์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ ‘๊ทผ์„ฑ์— ๋ง‰ํ˜”์Šต๋‹ˆ๋‹ค. ์ ‘๊ทผ์„ฑ ๋ถ€๋ถ„์ด DefenitelyTyped์™€ ํ•จ๊ป˜ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ซ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ๋ฌธ์ œ์— ๋Œ€ํ•ด Highcharts ์ง€์› ํŒ€์— ์—ฐ๋ฝํ–ˆ์ง€๋งŒ ์•„์ง ์šด์ด ์—†์Šต๋‹ˆ๋‹ค.
์šฐ๋ฆฌ ํŒ€์—์„œ๋Š” Highcharts/Highmaps๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” ๊ทธ๊ฒƒ์— ํˆฌ์žํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ƒ๊ฐํ•ด ์ฃผ์„ธ์š”.

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์ด ๋ฌธ์ œ๊ฐ€ ๋†’์€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋˜์—ˆ์Œ์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Highcharts ํŒ€( @sophiebremer ๋ฐ @oysteinmoseng )์€ ์‹ค์ œ๋กœ ๋‚˜์™€ ํ•จ๊ป˜ ๋””๋ฒ„๊น… ์„ธ์…˜์— ์ฐธ์—ฌํ–ˆ์œผ๋ฉฐ Js ํŒŒ์ผ์„ ์ง์ ‘ ๋กœ๋“œํ•˜์—ฌ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ˆœ๊ฐ„์— ์ €๋ฅผ ์ฐจ๋‹จ ํ•ด์ œํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ๋“ค์ด ์ œ๊ณตํ•œ ์‹œ๊ฐ„๊ณผ ์†”๋ฃจ์…˜์— ์ •๋ง ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ถ๊ทน์ ์ธ ์†”๋ฃจ์…˜์œผ๋กœ Highcharts์™€ ํ•จ๊ป˜ TS ์„ ์–ธ ํŒŒ์ผ์„ ๊ธฐ๋Œ€ํ•˜์‹ญ์‹œ์˜ค. :)

์šฐ์„  ์ˆœ์œ„๋ฅผ ๋ถ€์—ฌํ•œ @sophiebremer ์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Typescript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ : ๋” ๋‚˜์€ ์ปจํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ณ  Highcharts ํŒ€์˜ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๊ฐ์‚ฌ๋ฅผ ํ‘œํ•˜๊ธฐ ์œ„ํ•ด ๋Œ“๊ธ€์„ ํŽธ์ง‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” Angular/typescript๋กœ ์ž‘์—…ํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ Highstock์„ ์ง‘์ค‘์ ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํƒ€์ดํ”„์Šคํฌ๋ฆฝํŠธ ์ •์˜๊ฐ€ ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ €ํฌ๋Š” ConfirmlyTyped์˜ ์ •์˜๊ฐ€ ์ฐธ์กฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ Highstock์—์„œ๋Š” ์™„์ „ํžˆ ๊ตฌ์‹์ž…๋‹ˆ๋‹ค.

์ด typescript ์ •์˜๋Š” ์šฐ๋ฆฌ์—๊ฒŒ ์ •๋ง ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค!
๋ชจ๋“  ETA๋ฅผ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค :)

์ด์ œ ํ’ˆ์งˆ์— ๋Œ€ํ•ด ์ž‘์—…ํ•˜๊ณ  Highcharts์˜ ์˜ต์…˜ ํŠธ๋ฆฌ์—์„œ ์ƒ์„ฑ๋œ ์ธํ„ฐํŽ˜์ด์Šค ์ˆ˜๋ฅผ ์ค„์ด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ํ›„ ๊ณต๊ฐœ ๋ฒ ํƒ€ ๋‹จ๊ณ„๋ฅผ ์‹œ์ž‘ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ETA๋Š” ํ˜„์žฌ ๋ฒ ํƒ€ ๋ฒ„์ „์˜ 2018๋…„ 3๋ถ„๊ธฐ์ž…๋‹ˆ๋‹ค.

@sophiebremer ์ข‹์€ ์†Œ์‹์ž…๋‹ˆ๋‹ค! DTS ์ƒ์„ฑ๊ธฐ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ๊ธฐ์กด ๋ณ€ํ™˜ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์šฐ๋ฆฌ๋Š” ๋งž์ถคํ˜•์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์•„๋ž˜์— dts-dom์„ ์‚ฌ์šฉํ•˜์—ฌ https://github.com/highcharts/highcharts/pull/8307 ๋Œ์–ด์˜ค๊ธฐ ์š”์ฒญ์˜ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‹œ๋„ํ–ˆ์ง€๋งŒ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์— ๋Œ€ํ•œ ์†Œ์‹์ด ์žˆ์Šต๋‹ˆ๊นŒ? @types/highcharts ์ด ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ๋†’์€ ์šฐ์„  ์ˆœ์œ„๋กœ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ ์ง€๊ธˆ์€ ์„ ์–ธ์˜ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๊ฒŒ์‹œํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์•„์ง ํ†ตํ•ฉํ•ด์•ผ ํ•˜๊ฑฐ๋‚˜ ๋„์ž…ํ•ด์•ผ ํ•˜๋Š” ์œ ํ˜•์ด ์žˆ์Šต๋‹ˆ๋‹ค. "highcharts.d.ts"๋Š” 200.000์ค„ ์ด์ƒ์˜ ์„ ์–ธ๊ณผ ์ฃผ์„์„ ํฌํ•จํ•˜๋Š” ๊ฑฐ๋Œ€ํ•œ ํŒŒ์ผ์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@sophiebremer ์–ด๋–ป๊ฒŒ ๊ทธ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๊นŒ? ์ˆ˜๋™์œผ๋กœ?

@scott-ho
์„ ์–ธ ํŒŒ์ผ์€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜์ง€๋งŒ ์†Œ์Šค ์ฝ”๋“œ์—์„œ doclet์„ ์ˆ˜์ •ํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์€ ์ˆ˜๋™ ํ”„๋กœ์„ธ์Šค์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„! ๋‚ด ๊ฐœ์ธ ์ €์žฅ์†Œ์— Highcharts ์„ ์–ธ์˜ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ๊ฒŒ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. npm i https://github.com/sophiebremer/highcharts-declarations-alpha.git ํ…Œ์ŠคํŠธํ•˜๊ฑฐ๋‚˜ https://github.com/sophiebremer/highcharts-declarations-alpha/blob/master/highcharts.d.ts ์—์„œ ์„ ์–ธ์„ ๋‹ค์šด๋กœ๋“œํ•˜์—ฌ ./node_modules/highcharts/ ์ง์ ‘ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•Œ๋ ค์ง„ ๋ฌธ์ œ:

  • options.series ์†์„ฑ์˜ ์œ ํ˜• ๊ณ ์ •์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ { data: [0, 1, 2]} as Highcharts.SeriesLineOptions ์™€ ๊ฐ™์€ ์‹œ๋ฆฌ์ฆˆ ์œ ํ˜•์œผ๋กœ ๊ฐœ์ฒด๋ฅผ ์บ์ŠคํŒ…ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • ์Šคํƒ€์ผ ์˜ต์…˜์€ CSSObject ์œ ํ˜•์˜ ๋ชจ๋“  ๊ณณ์— ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์„ ํƒ๊ณผ ๊ฐ™์€ ChartEventsOptions ํ•จ์ˆ˜๋Š” ์ด๋ฒคํŠธ ํ•จ์ˆ˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์ฐพ์€ ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ๋ฌธ์ œ

  • ๋‚ด๋ณด๋‚ด๊ธฐ, ์˜คํ”„๋ผ์ธ ๋‚ด๋ณด๋‚ด๊ธฐ ๋ชจ๋“ˆ์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ณต์žฅ์„ ๋‚ด๋ณด๋‚ด๊ณ  ๊ธฐ๋ณธ ๊ฐ€์ ธ์˜ค๊ธฐ๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋‚ด๋ณด๋‚ด๊ธฐ = ๊ณต์žฅ์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ์ฃผ์„ ๋ชจ๋“ˆ ๋ˆ„๋ฝ

  • PlotSeriesEventsOptions ํด๋ฆญ์„ ํด๋ฆญ์œผ๋กœ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? (e:PointerEventObject) => ๋ถ€์šธ;

ํ”ผ๋“œ๋ฐฑ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค, @muperi !
๋‘ ๋ฒˆ์งธ ๊ฒŒ์‹œ๋ฌผ์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์˜๊ฒฌ:

  • ์ผ๋ฐ˜ ๋ชจ๋“ˆ์€ ๊ธฐ๋ณธ ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ES6 ์„ค์ •์— ๋Œ€ํ•œ tsconfig๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
  • ์ผ๋ถ€ ๋ชจ๋“ˆ์—๋งŒ ์•„์ง ์„ ์–ธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์•ž์œผ๋กœ ๋ช‡ ๋‹ฌ ๋™์•ˆ ๋” ์ถ”๊ฐ€ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • ์ด ๋ฌธ์ œ๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์„ ํƒ๊ณผ ๊ฐ™์€ ChartEventsOptions ํ•จ์ˆ˜๋Š” ์ด๋ฒคํŠธ ํ•จ์ˆ˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ˆ˜์ • ์‚ฌํ•ญ์€ highcharts/highcharts#9110์˜ ์ผ๋ถ€์ด๋ฉฐ https://github.com/highcharts/highcharts-declarations-beta์˜ ๋‹ค์Œ ์—…๋ฐ์ดํŠธ์— ํฌํ•จ๋  ์˜ˆ์ •

์ด ์ €์žฅ์†Œ์— ์„ ์–ธ ํŒŒ์ผ์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ๋ฌธ์ œ๋ฅผ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค: https://github.com/highcharts/highcharts-declarations-beta.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰