Highcharts: ๋†’์€ ๊นŠ์ด๋กœ ๊ฒน์น˜๋Š” 3D ๊ธฐ๋‘ฅ

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

ํ–‰๋™

๋†’์€ ๊นŠ์ด ์„ค์ •์ด์žˆ์„ ๋•Œ 3D ๊ธฐ๋‘ฅ์ด ์„œ๋กœ ๊ฒน์นฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ์˜ ๋ผ์ด๋ธŒ ๋ฐ๋ชจ

http://jsfiddle.net/0ggczp13/1/

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

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ SVGRenderer.prototype.cuboidPath๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•˜๋ฉฐ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ์—ด์— ๋Œ€ํ•œ zIndex๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ์•„์ด๋””์–ด๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://jsfiddle.net/4y3qgdmn/32/

์ด ๊ฒฝ์šฐ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ๋ Œ๋”๋ง๋˜๋Š” ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์‹œ๋ฆฌ์ฆˆ ๋‹น ๊ฐœ๋ณ„ ๊ทธ๋ฃน ๋Œ€์‹  ๋ชจ๋“  ์‹œ๋ฆฌ์ฆˆ ํฌ์ธํŠธ์— ๋Œ€ํ•ด ํ•˜๋‚˜์˜ ๊ทธ๋ฃน ๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

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

๋ชจ๋“  ์‹œ๋ฆฌ์ฆˆ์— ๋™์ผํ•œ ๊ทธ๋ฃน์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ์ œ์ฒ˜๋Ÿผ ๋ณด์ž…๋‹ˆ๋‹ค. 2D์—์„œ๋Š” ๋ฌธ์ œ๊ฐ€ ์—†์ง€๋งŒ 3D์—์„œ๋Š” ๋ Œ๋”๋ง ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์—ฐ๊ฒฐ ํ‹ฐ์ผ“ : # 4369

์•ˆ๋…•ํ•˜์„ธ์š”,์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์•„์ง ์žˆ์Šต๋‹ˆ๊นŒ?
screen shot 2017-02-15 at 17 25 59

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ SVGRenderer.prototype.cuboidPath๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•˜๋ฉฐ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ์—ด์— ๋Œ€ํ•œ zIndex๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ์•„์ด๋””์–ด๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://jsfiddle.net/4y3qgdmn/32/

์ด ๊ฒฝ์šฐ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ๋ Œ๋”๋ง๋˜๋Š” ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์‹œ๋ฆฌ์ฆˆ ๋‹น ๊ฐœ๋ณ„ ๊ทธ๋ฃน ๋Œ€์‹  ๋ชจ๋“  ์‹œ๋ฆฌ์ฆˆ ํฌ์ธํŠธ์— ๋Œ€ํ•ด ํ•˜๋‚˜์˜ ๊ทธ๋ฃน ๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

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