Highcharts: HTML DataLabels ๋ฐ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์˜ˆ์™ธ์—†์ด ์ƒˆ๋กœ ๊ณ ์นจ

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

๋˜ ๋‹ค๋ฅธ ์• ๋งคํ•œ ๋ฌธ์ œ๋กœ ๋‹ค์‹œ ๋‚˜.

์กฐ๊ฑด๋ถ€ HTML dataLabels๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฌ์ธํŠธ ๊ฐ’์— ๋”ฐ๋ผ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

๋•Œ๋•Œ๋กœ dataLabels๊ฐ€ ์žˆ๋Š” ์ฐจํŠธ์—์„œ ์•„๋ฌด ๊ฒƒ๋„ ์—†๋Š” ์ฐจํŠธ๋กœ ์ „๋‹ฌํ•  ๋•Œ javascript ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

TypeError: ์ •์˜๋˜์ง€ ์•Š์€ 'onmouseover' ์†์„ฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋‹ค์Œ ์กฐ๊ฑด์—์„œ๋งŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

  • DataLabel์ด useHTML๋กœ ์„ค์ •๋จ: true
  • ๋ฐ์ดํ„ฐ ๋ ˆ์ด๋ธ”์ด ์กด์žฌํ•˜์ง€ ์•Š๋„๋ก ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” "setData()" ํ˜ธ์ถœ์— ์ด์–ด ์ตœ์†Œํ•œ ํ•˜๋‚˜์˜ dataLabels๊ฐ€ ์žˆ๋Š” ์ฐจํŠธ๋ฅผ ๋ Œ๋”๋งํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๊ณ„์—ด ์†์„ฑ์— ๋Œ€ํ•ด .update()๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค(๋ณ‘ํ•ฉํ•  ์†์„ฑ์ด ๋น„์–ด ์žˆ๋Š” ๊ฒฝ์šฐ์—๋„).

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

์˜ค๋ฅ˜ ์—†์Œ

์‹ค์ œ ํ–‰๋™

์˜ˆ์™ธ ๋ฐœ์ƒ

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

http://jsfiddle.net/gts29eq7/1/

๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

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

๋ชจ๋‘

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

dataLabels์—์„œ null ๋Œ€์‹  ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์ด๋กœ ์ธํ•ด ๋งŽ์€ ์ง€์ ์—์„œ ์—„์ฒญ๋‚œ ์†๋„ ์ €ํ•˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
useHTML์„ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ์‚ฌ์ง„์„ ํ‘œ์‹œํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ github ์ƒˆ ๋ฌธ์ œ ํ…œํ”Œ๋ฆฟ์—๋Š” "๋™์ž‘"(๋™์ž‘)์— ์˜คํƒ€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

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

@Dung ์‹ ๊ณ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

_๋‚ด๋ถ€ ์ฐธ๊ณ : series.dataLabelGroup ์žˆ์ง€๋งŒ div ์š”์†Œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— _

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

@Dung ์‹ ๊ณ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

_๋‚ด๋ถ€ ์ฐธ๊ณ : series.dataLabelGroup ์žˆ์ง€๋งŒ div ์š”์†Œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— _

@jon-a-nygaard ์ด์— ๋Œ€ํ•œ ์ˆ˜์ • ์‚ฌํ•ญ์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌ ํ•ด์š”!

๊ทผ๋ณธ ์›์ธ์€ SVG ๊ทธ๋ฃน์— HTML ๋Œ€์‘๋ฌผ์ด ์žˆ๊ณ  HTML ๋Œ€์‘๋ฌผ์ด ์‚ญ์ œ๋˜๋Š” ๋™์•ˆ SVGWrapper์˜ ์žฌ์ •์˜๋œ on ํ•จ์ˆ˜๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด๋ก ์ ์œผ๋กœ translateXSetter ๋ฐ translateYSetter ์—์„œ๋„ ๋™์ผํ•œ ์ผ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ parents[0].div ๋ฅผ ํ™•์ธํ•˜์—ฌ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๊ฒƒ์ด์ง€๋งŒ ์™„์ „ํ•œ ์ˆ˜์ •์„ ์œ„ํ•ด์„œ๋Š” SvgRenderer.js ์—์„œ div๋ฅผ ์‚ญ์ œํ•  ๋•Œ ์›๋ž˜ ๊ธฐ๋Šฅ์„ ๋ณต์›ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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