flotr2 »ç¿ë¹ý


  flotr2´Â HTML5±â¹ÝÀÇ Â÷Æ®¸¦ ±×¸± ¼ö ÀÖ´Â ¿ÀÇ ¼Ò½º ¶óÀ̺귯¸®ÀÌ´Ù.

  flotr(Javascript plotting library for Prototyp.js, Project Home ) ¶ó´Â ¶óÀ̺귯¸®·ÎºÎÅÍ ºÐ±âµÈ °ÍÀ¸·Î ±âÁ¸ flotr°¡ Prototype JS¿¡ Á¾¼Ó¼ºÀÌ ÀÖ¾ú´Âµ¥, À̺κÐÀ» Á¦°ÅÇÏ¿´À¸¸ç, ±×¿Ü¿¡µµ ¸¹Àº ±â´É °³¼±À» ¼öÇàÇÏ¿© ¹ßÀüµÇ°í ÀÖ´Ù.

  flotr2ÀÇ Æ¯Â¡Àº ´ÙÀ½°ú °°´Ù.
  • HTML5ÀÇ canvas¸¦ ±â¹ÝÀ¸·Î ÀÛ¼ºµÈ Â÷Æ® ¶óÀ̺귯¸®
  • jQuery¿Í °°Àº ´Ù¸¥ ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¿¡ Á¾¼ÓÀûÀÌÁö ¾ÊÀ½
  • Â÷Æ®ÀÇ °¢ ±¸¼º¿ä¼Òµé¿¡ ´ëÇÑ ¸¹Àº ¿É¼ÇÀ» Á¦°ø
  • PlugIn ±¸Á¶·Î °³¹ßµÇ¾î, ¿øº» ¼öÁ¤¾øÀÌ Ãß°¡ÀûÀÎ ±â´É ¹× Â÷Æ® Ãß°¡ °¡´É
  • ´ëºÎºÐÀÇ ºê¶ó¿ìÀú¸¦ Áö¿ø (Internet Explorer 6.0ÀÌ»ó Áö¿ø)
  • ´ëºÎºÐÀÇ ¸ð¹ÙÀÏ ºê¶ó¿ìÀú Áö¿ø (¾Èµå·ÎÀ̵å, ¾ÆÀÌÆùÀÇ ºê¶ó¿ìÀú Áö¿ø)
  • Àμâ½Ã¿¡µµ È­¸é¿¡ º¸ÀÌ´Â °Í°ú µ¿ÀÏÇÏ°Ô Àμ⠰¡´É
  • MIT¶óÀ̼±½º ÇÏ¿¡¼­ ¹èÆ÷µÇ¹Ç·Î, ¶óÀ̼±½º ¹®±¸¸¸ Æ÷ÇÔÇÏ¸é ¼Ò½º °ø°³Àǹ«µµ ¾ø°í ¼öÁ¤, Àç¹èÆ÷, ÆǸűîÁö °¡´ÉÇÑ ¿ÏÀüÈ÷ ¹«·á ( License ¿ø¹® Link )
  ´ÙÀ½Àº flotr2¿Í °ü·ÃµÈ URL Á¤º¸µéÀÌ´Ù. (¾Æ·¡ ȨÆäÀÌÁö¸¦ ¿­¸é ¾î¶² Â÷Æ®µéÀÌ °¡´ÉÇÑÁö ÇÑ´«¿¡ ³ª¿Â´Ù. )

ȨÆäÀÌÁö ¸ÞÀλçÀÌÆ®http://www.humblesoftware.com/flotr2/
¼Ò½ºÄÚµå ¼Ò½ºÄÚµå ´Ù¿î·Îµåhttps://github.com/HumbleSoftware/Flotr2
±¸±Û±×·ì½º Æ÷·³°ú °°ÀÌ Q&A °¡´Éhttps://groups.google.com/forum/#!forum/flotr2

flotr2 »ùÇÃ

  °£´ÜÇÑ »ùÇÃÀ» ¸¸µé¾îº¸ÀÚ. Áغñ»çÇ×Àº ´ÙÀ½°ú °°´Ù.

  • ÀÓÀÇÀÇ µð·ºÅ丮¸¦ Çϳª ¸¸µç ´ÙÀ½, À§ÀÇ ¼Ò½ºÄÚµå ´Ù¿î·Îµå »çÀÌÆ®¿¡°¡¼­ flotr2.min.jsÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þ´Â´Ù.
  • ¸¸ÀÏ, IE8, IE7, IE6¿¡¼­µµ ÀߵǴÂÁö Å×½ºÆ® ÇÏ±æ ¿øÇÑ´Ù¸é ´ÙÀ½°ú °°Àº 2°¡Áö Ãß°¡ ÀÛ¾÷ÀÌ ÇÊ¿äÇÏ´Ù.
    • flashcanvas ¶óÀ̺귯¸® 2°³°¡ ÇÊ¿äÇÏ´Ù. ¿À¸¥ÂÊ ¸µÅ©¸¦ ¸¶¿ì½º ¿À¸¥ÂÊ ¹öÆ°À» ´­·¯¼­ "´Ù¸¥À̸§À¸·ÎÀúÀå" À» ¼±ÅÃÇÏ¿© À§ÀÇ µð·ºÅ丮¿¡ °°ÀÌ ÀúÀåÇ϶ó.
      ( Canvas ÀÚ¹Ù½ºÅ©¸³Æ® , Canvas Ç÷¡½¬ÆÄÀÏ )
    • À¥¼­¹ö¸¦ Çϳª ¼³Ä¡ÇÏ°í ÇØ´çÆú´õ¸¦ ÁöĪÇ϶ó. ( °¡Àå ¹«³­ÇÑ Apache¸¦ ¼³Ä¡Çϰųª ÀÌ¹Ì °¡Áö°í ÀÖ´Â ¼­¹ö¸¦ ÀÌ¿ëÇصµ ÁÁ´Ù. À̺κÐÀº ³Ñ¾î°¡´Ï À¥¼­¹ö ¼³Á¤Àº ´Ù¸¥ ¹®¼­µéÀ» Âü°íÇ϶ó)
  • Ȥ½Ã À§ÀÇ ´Ù¿î·Îµå ¸µÅ©µéÀÌ ±úÁ®ÀÖ´Ù¸é ÀÌ È¨ÆäÀÌÁöÀÇ ÀÚ·á¿¡ ÀÖ´Â °ÍÀ» »ç¿ëÇ϶ó. - ´õ ±¸¹öÀüÀÌÁö¸¸ ¼­·Î ÀÛµ¿µÇ´Â ÆÄÀÏÀ̹ǷΠ»ç¿ëÀº °¡´ÉÇÒ °ÍÀÌ´Ù. ÇÊ¿äÇÑ 3°³ÆÄÀÏÀ» ZipÀ¸·Î ¹­¾îµÐ °ÍÀÌ´Ù. ( Zip ´Ù¿î·Îµå )
    IE8 ÀÌÇÏ ¹öÀü ÀÛµ¿ ¹æ½Ä   IE9, IE10 ¿¡¼­´Â HTML5ÀÇ canvas ¿ä¼Ò¸¦ Áö¿øÇϱ⠶§¹®¿¡ flotr2.min.js ÆÄÀϸ¸À¸·Î ÃæºÐÈ÷ ÀÛµ¿ÀÌ °¡´ÉÇÏ´Ù. ±×·¯³ª, IE8À» Æ÷ÇÔÇÑ ±× ÀÌÇÏ ¹öÀü¿¡¼­´Â canvas´ë½Å flash¸¦ ´ë¿ëÀ¸·Î »ç¿ëÇϵµ·Ï ±¸¼ºµÇ¾îÀÖ´Ù. À̸¦ Å×½ºÆ® Çϱâ À§Çؼ­´Â À¥¼­¹ö¿¡¼­ HTMLÆÄÀÏÀ» ·ÎµùÇؾ߸¸ flash°¡ ·ÎµùµÇ±â ¶§¹®¿¡ º°µµÀÇ À¥¼­¹ö°¡ ÇÊ¿äÇÏ´Ù.

      ¸¸ÀÏ IE8¿¡¼­ Å×½ºÆ®½Ã À¥¼­¹ö¸¦ ÀÌ¿ëÇÏÁö ¾Ê°í ¹Ù·Î ·ÎÄà ÆÄÀÏ ½Ã½ºÅÛ¿¡¼­ ºÒ·¯µéÀ̸é ÇϾá È­¸é¸¸ ³ª¿Ã °ÍÀÌ´Ù. (¹°·Ð, Å©·ÒÀ̳ª ÆÄÀ̾îÆø½ºµî°ú °°Àº ºê¶ó¿ìÀú´Â ·ÎÄà ÆÄÀÏ ½Ã½ºÅÛ¿¡¼­µµ Àß ÀÛµ¿ÇϹǷΠº°µµÀÇ À¥¼­¹ö´Â ÇÊ¿ä¾ø´Ù.)
    Â÷Æ®°¡ ³ª¿ÀÁö ¾ÊÀº °æ¿ì   ¿ì¼±, ¹®¹ýÀûÀ¸·Î ¿À·ù°¡ ÀÖ´ÂÁö ¹Ýµå½Ã ¸ÕÀú È®ÀÎÇ϶ó. ±×¸®°í, IEÀÇ °æ¿ì¿¡´Â Çؽ¬Çü µ¥ÀÌÅͱ¸Á¶ÀÇ ¸¶Áö¸·¿¡ ÄÞ¸¶(,)°¡ µé¾î°¡´Â °æ¿ì¿¡ Â÷ƮƲ ±×¸®Áö ¸øÇÏ´Â °æ¿ì°¡ ÀÖÀ¸´Ï È®ÀÎÇ϶ó.

     ¸ðµÎ È®ÀÎÇߴµ¥µµ ºÒ±¸ÇÏ°í Â÷Æ®°¡ ³ªÅ¸³ªÁö ¾Ê´Â´Ù¸é(ƯÈ÷ IE7¿¡¼­), Â÷Æ®¸¦ ±×¸®´Â ºÎºÐÀ» window.onload ·Î º¯°æÇ϶ó. ÀÌ·² ¶§´Â jQuery¸¦ »ç¿ëÇϸé ÁÁ´Ù. (Â÷Æ®¸¦ ±×¸®±â ½ÃÀÛÇÒ ¶§, ¿µ¿ªÀÇ »çÀÌÁî(°¡·Î, ¼¼·Î)°¡ È®Á¤µÇ¾î¾ß¸¸ ±×·ÁÁø´Ù. º¹ÀâÇÑ ÆäÀÌÁöÀÇ °æ¿ì styleÀ» ÁÖ¾ú´Ù°í ÇÏ´õ¶óµµ, º¹ÀâÇÑ DOM±¸Á¶ ¶§¹®¿¡ ½ÇÁ¦ chart°¡ ±×·ÁÁú ¿µ¿ªÀÇ »çÀÌÁî °è»êÀÌ ´Ê¾îÁö´Â °æ¿ì°¡ ÀÖ´Ù. )
  test.hthmlÆÄÀÏÀ» Çϳª ¸¸µé¾î¼­ ¾Æ·¡ Äڵ带 ºÙ¿©³ÖÀº µÚ ºê¶ó¿ìÀú·Î ¿­¾îº¸¸é µÈ´Ù. (¹°·Ð, IE8ÀÌÇÏ¿¡¼­´Â À§¿¡¼­ ¼³¸íÇßµíÀÌ À¥¼­¹ö¸¦ ÅëÇؼ­ ¿­¾î ºÁ¾ß¸¸ Á¦´ë·Î ¿­¸°´Ù.)

Link : »õâ¿¡¼­ ¿­±â



  À§ÀÇ Äڵ带 ¾à°£ ¼³¸íÇÏÀÚ¸é,
  • 3 ~ 5¶óÀÎ : IE8À» Æ÷ÇÔÇÑ ÀÌÀü ¹öÀü Áö¿øÀ» À§ÇØ flashcanvas ¶óÀ̺귯¸®¸¦ Æ÷ÇÔ
    (ÀÌ·¯ÇÑ °ÍÀ» Á¶°ÇºÎ ÁÖ¼®À̶ó°í ºÎ¸£¸ç, ÀÌ¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ ¼³¸íÀº À§Å°Çǵð¾Æ ÂüÁ¶ : Link )
  • 6 ~ 10¶óÀÎ : Â÷Æ®°¡ ±×·ÁÁú ¿µ¿ª¿¡ ´ëÇÑ CSS ¸¦ Á¤ÀÇ
  • 12¶óÀÎ : flort2 Â÷Æ® ¶óÀ̺귯¸® Æ÷ÇÔ
  • 16¶óÀÎ : Â÷Æ®°¡ ±×·ÁÁú ¿µ¿ªÀ» div ű׷ΠÁ¤ÀÇ (ID Çʼö)
  • 21¶óÀÎ : ÁÂÇ¥°ªÀ» ArrayÇüÅ·Πǥ±â. Áï [x, y]ÇüÅÂÀÇ °ªµé ´©Àû
  • 24¶óÀÎ ~ 41¶óÀÎ : ½ÇÁ¦ ±×¸®´Â ºÎºÐ È£Ãâ
  • 42¶óÀÎ : ID°¡ chart1ÀÎ div¿¡ Â÷Æ®¸¦ ±×¸®±âÀ§ÇØ ÇÔ¼ö È£Ãâ
  ¾ÆÁÖ ±âº»ÀûÀÎ Â÷Æ®¸¦ ±×·Áº» °Í »ÓÀ̶ó ¸ð¾çÀ̶û »ö±òÀÌ Á» º°·ÎÀÏ °ÍÀÌ´Ù. ´ÙÀ½ ÆäÀÌÁöºÎÅÍ´Â Á»´õ ´Ù¾çÇÑ ¿É¼Çµé¿¡ ´ëÇؼ­ ¾Ë¾Æº¸µµ·Ï ÇÏÀÚ.

- Last Update : 2013.06.24 by Deadfire(http://www.deadfire.net)

Tip & Tech

Copyright ¨Ï 1997 ~, Deadfire Program Master