Highcharts: ํŒŒ์ด/๋„๋„› ์ฐจํŠธ - ์ผ๋ถ€ ๋ฐ€์ง‘๋œ ์ฐจํŠธ ์˜์—ญ์—์„œ ์—ฐ๊ฒฐ์„ ์ด ๋ˆ„๋ฝ๋จ

์— ๋งŒ๋“  2018๋…„ 02์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: highcharts/highcharts

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

์—ฐ๊ฒฐ์„ ์€ ๋ชจ๋“  ํŒŒ์ด/๋„๋„› ์„ธ๊ทธ๋จผํŠธ์— ๋Œ€ํ•ด ํ‘œ์‹œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ ํ–‰๋™

์กฐ๋ฐ€ํ•˜๊ฒŒ ์ฑ„์›Œ์ง„ ๋ฐ์ดํ„ฐ ์„ธ๊ทธ๋จผํŠธ ์‚ฌ์ด์— ์กด์žฌํ•˜๋Š” ๋„ˆ๋ฌด ์ž‘์€ ์„ธ๊ทธ๋จผํŠธ์— ๋Œ€ํ•ด์„œ๋Š” ์—ฐ๊ฒฐ์„ ์ด ๊ทธ๋ ค์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

image

์žฌํ˜„ ๋‹จ๊ณ„๊ฐ€ ํฌํ•จ๋œ ๋ผ์ด๋ธŒ ๋ฐ๋ชจ

http://jsfiddle.net/FKawc/65/

์ œํ’ˆ ๋ฒ„์ „

6.0.7

์˜ํ–ฅ์„ ๋ฐ›๋Š” ๋ธŒ๋ผ์šฐ์ €

Chrome, Firefox, IE, Edge, ...(๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €).

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

์ถ”๊ฐ€๋กœ: dataLabels ๋ฐฐํฌ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ํ•จ์ˆ˜๋Š” Highcharts.distribute์ž…๋‹ˆ๋‹ค. ์žฌ์ •์˜ํ•˜๊ณ  ๋” ๋‚˜์€ ๋…ผ๋ฆฌ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋ ˆ์ด๋ธ”์˜ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฐ„๋‹จํ•œ ์ˆ˜์ •(JS ๋ผ์ธ 42)์ด ์žˆ๋Š” ๋ฐ๋ชจ์ž…๋‹ˆ๋‹ค(๊ณ„์‚ฐ์— ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ):
http://jsfiddle.net/BlackLabel/9f5orgn4/

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

์•ˆ๋…•ํ•˜์„ธ์š” @ananth-imagin

๋ฌธ์ œ๋ฅผ ์‹ ๊ณ ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์˜ˆ์ƒ๋œ ๋™์ž‘์ž…๋‹ˆ๋‹ค. ๋ ˆ์ด๋ธ”์„ ์œ„ํ•œ ๊ณต๊ฐ„์ด ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์œผ๋ฉด ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฐ’์ด ๊ฐ€์žฅ ๋‚ฎ์€ ๋ ˆ์ด๋ธ”์ด ๋จผ์ € ์ˆจ๊ฒจ์ง‘๋‹ˆ๋‹ค. ์ด๋Š” point.labelrank ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ ˆ์ด๋ธ”์„ ์œ„ํ•œ ๋” ๋งŽ์€ ๊ณต๊ฐ„์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๊ฑฐ๋ฆฌ๋ฅผ ๋Š˜๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค: http://jsfiddle.net/BlackLabel/FKawc/67/ - ํ•˜์ง€๋งŒ ๋ฐ์ดํ„ฐ ์„ธํŠธ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ๋˜๋Š” ๋ ˆ์ด๋ธ” ์ฃผ๋ณ€์˜ ํŒจ๋”ฉ์„ ์ค„์ด์‹ญ์‹œ์˜ค. http://jsfiddle.net/BlackLabel/FKawc/78/

์ถ”๊ฐ€๋กœ: dataLabels ๋ฐฐํฌ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ํ•จ์ˆ˜๋Š” Highcharts.distribute์ž…๋‹ˆ๋‹ค. ์žฌ์ •์˜ํ•˜๊ณ  ๋” ๋‚˜์€ ๋…ผ๋ฆฌ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋ ˆ์ด๋ธ”์˜ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฐ„๋‹จํ•œ ์ˆ˜์ •(JS ๋ผ์ธ 42)์ด ์žˆ๋Š” ๋ฐ๋ชจ์ž…๋‹ˆ๋‹ค(๊ณ„์‚ฐ์— ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ):
http://jsfiddle.net/BlackLabel/9f5orgn4/

์•ˆ๋…•ํ•˜์„ธ์š” @pawelfus & @KacperMadej ,

์†”๋ฃจ์…˜์— ๋Œ€ํ•ด ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌ ํ•ด์š”,
์•„๋‚œ์Šค

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