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