´º½º > »ê¾÷ > »ê¾÷

Åõºñ¼ÒÇÁÆ® ÀÚȸ»ç µð¿¢½ºÅõºñ, Â÷Æ® ¼Ö·ç¼Ç 'DX Chart' Ãâ½Ã

  • º¸µµ : 2024.04.23 10:23
  • ¼öÁ¤ : 2024.04.23 10:23

Á¶¼¼ÀϺ¸
¡ß…»çÁø=µð¿¢½ºÅõºñ Á¦°ø
 
Åõºñ¼ÒÇÁÆ® ÀÚȸ»ç µð¿¢½ºÅõºñ(´ëÇ¥ ÃÖ¿µ½Ä)°¡ UI/UX °³¹ß Ç÷§Æû ³Ø»çÅ©·Î¿¡ ÃÖÀûÈ­ÇÑ ¸ÂÃãÇü Â÷Æ® ¼Ö·ç¼Ç 'DX Chart(µð¿¢½ºÂ÷Æ®)'¸¦ ¼±º¸Àδٰí 23ÀÏ ¹àÇû´Ù.

Â÷Æ® ¼Ö·ç¼ÇÀº µ¥ÀÌÅͳª Åë°è¸¦ À¥ºê¶ó¿ìÀú¿¡¼­ ¿øÇÏ´Â µðÀÚÀΰú Â÷Æ®·Î ±¸ÇöÇÏ´Â ÄÄÆ÷³ÍÆ®´Ù. DX Chart´Â ¼¶¼¼ÇÑ Á¦¾î°¡ °¡´ÉÇÏ°í ÀÌ¿ëÀÌ Æí¸®ÇÑ À¥ ±â¹Ý Â÷Æ® ÄÄÆ÷³ÍÆ®·Î UI/UX °³¹ß Ç÷§Æû ³Ø»çÅ©·Î¸¦ »ç¿ëÇÏ´Â °³¹ßÀÚÀÇ ÆíÀǼºÀ» ³ôÀ̱â À§ÇØ °³¹ßµÆ´Ù.

µð¿¢½ºÅõºñ´Â "CSS ±â¹Ý ÅøÆÁ ±â´ÉÀ» Áö¿øÇÏ´Â DX Chart´Â Å©·Î½º ºê¶ó¿ìÀú ȣȯ¼ºÀ¸·Î ³Ø»çÅ©·Î À¥»Ó ¾Æ´Ï¶ó ¸ðµç ¿î¿µÃ¼Á¦ÀÇ Ç»¾îÀ¥°ú ¸ð¹ÙÀÏ¿¡¼­µµ »ç¿ëÇÒ ¼ö ÀÖ´Ù"¸é¼­ "ĵ¹ö½º ŸÀÔÀ¸·Î °³¹ßµÈ DX Chart´Â SVG(È®Àå °¡´ÉÇÑ º¤ÅÍ ±×·¡ÇÈ) ŸÀÔ¿¡ ºñÇØ ¹®¼­°´Ã¼¸ðµ¨(DOM) Æ®¸® ±¸Á¶°¡ °£°áÇÏ°í °¡º­¿ö ´ë±Ô¸ð ÀÛ¾÷µµ º¸´Ù ºü¸£°Ô ó¸®ÇÒ ¼ö Àִµ¥ ÀϹÝÀûÀ¸·Î ĵ¹ö½º´Â SVGº¸´Ù ´õ °¡º±°í ·»´õ¸µ ½Ã ´õ ÀûÀº ¸Þ¸ð¸®¸¦ »ç¿ëÇØ À¥ ÆäÀÌÁöÀÇ ºÎÇϸ¦ °¨¼Ò½ÃÅ°°í ´õ ºü¸¥ ·Îµù ¼Óµµ¸¦ Á¦°øÇÑ´Ù"°í ¼³¸íÇß´Ù.

DX Chart´Â ÃÖÀûÈ­µÈ µ¥ÀÌÅÍ ½Ã°¢È­¸¦ À§ÇØ ¹Ù(Bar), ¶óÀÎ(Line), ·¹ÀÌ´õ(Radar), ÆÄÀÌ(Pie), °£Æ®(Gantt) µî Â÷Æ® 29Á¾°ú ¾à 300°³ÀÇ »ùÇÃÀ» Á¦°øÇÑ´Ù. Ä÷¯¿Í Â÷Æ®¸¦ »ç¿ëÀÚ ÃëÇâ¿¡ ¸Â°Ô ¹Ù²Ü ¼ö ÀÖ´Â ±â´Éµµ Á¦°øµÅ ÀÚÀ¯·Î¿î Ä¿½ºÅ͸¶ÀÌ¡ÀÌ °¡´ÉÇÏ´Ù.

À̹ۿ¡ ´Ù¾çÇÑ À¯ÇüÀÇ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú°¡ ¸¶·ÃµÆÀ¸¸ç Json ÇüÅ·ΠµðÀÚÀΰú ±â´É º¯°æµµ ¼Õ½±°Ô Â÷Æ®¿¡ ¹Ý¿µÇÒ ¼ö ÀÖ°í Á¦ÀÛÇÑ Â÷Æ®¸¦ Ä¿¹Â´ÏƼ¿¡µµ °øÀ¯ÇÒ ¼ö ÀÖ¾î ¿©·¯ °¡Áö Â÷Æ®¸¦ Àû¿ëÇØ º¼ ¼öµµ ÀÖ´Ù´Â °Ô ȸ»çÃø ¼³¸íÀÌ´Ù.

µð¿¢½ºÅõºñ °ü°èÀÚ´Â "DX Chart´Â ´©±¸³ª ½±°í ºü¸£°Ô ´Ù¾çÇÑ Â÷Æ®¸¦ È°¿ëÇØ ½Ã°¢Àû µ¥ÀÌÅ͸¦ ¸¸µé°í Ä¿½ºÅ͸¶ÀÌ¡ Â÷Æ®µµ ±¸ÇöÇÒ ¼ö ÀÖ´Â ÃÖÀûÀÇ ¼Ö·ç¼Ç"À̶ó¸ç "ÃßÈÄ ¼ÒºñÀÚÀÇ ´ÏÁ ¹Ý¿µÇØ Áö¼ÓÀûÀ¸·Î ¾÷µ¥ÀÌÆ®ÇÒ °Í"À̶ó°í ¸»Çß´Ù.

ÁÖ¿ä±â»ç