flotr2 사용법


flotr2 BarChart 들여다보기

  앞에서 간단하 BarChart를 소개했다. 이 BarChart를 가지고 flotr2로 할 수 있는 다양한 기능들을 확장해보자.

  먼저, 앞에서 썼던 소스를 조금 더 수정해보자.(앞으로 예제를 표시할 때는 차트를 그리는 JavaScript부분만 예시로 들고, 나머지 CSS, JavaScript외부라이브러리 로드, IE대응관련 FlashCanvas로드, DIV태그등과 같은 부분들은 앞장에서 설명했으므로 생략하겠다. )

Link : 새창에서 열기



  가장 핵심이 되는 문장은 Flotr.draw() 함수이다. 이 함수가 실제로 그리는 역할을 수행하게 된다.

    Flotr.draw( 그려야할 위치, 데이터 배열, 옵션-Hash값 );

flotr2 차트의 옵션들

  flotr2 차트에는 다양한 옵션들이 존재한다. 이러한 옵션을 찾아보는 방법 가장 좋은 방법은 원본 Source에서 어떤 항목들이 지원되는지 확인해보는 것이다.

  새창에서 Source 열기

  위의 소스코드에서 Flotr.defaultOptions 를 찾으면, 그 아래에 다양한 옵션들을 볼 수 있다. (대략 1,600라인쯤 된다.)

  다음은 모든 차트에서 사용되는 쓸만한 옵션정보들이다.

옵션설명
colors차트의 색상, 기본5개로 로테이션됨
title차트 제목
HtmlText차트에 사용되는 글자들에 HTML적용할지 여부
fontColor글자 색상
preventDefault모바일단말기에서 스크롤되도록 할지 여부 (이 건 본인이 요청해서 추가된 옵션이다.)
xaxisX축 정보 설정 (하단)
x2axisX축 정보 설정 (상단)
yaxisY축 정보 설정 (왼쪽)
y2axisY축 정보 설정 (오른쪽)
grid차트 배경 격자선
mouse마우스 이벤트 처리 방법


  위와 같은 설정들은 하나씩 테스트해보면서 어떻게 지원되는지 확인할 필요가 있다.

  아래는 다양한 옵션을 제공해서 만든 BarChar 샘플이다. 소스는 아래에 있다.

Link : 새창에서 열기



  바차트의 기본은 이정도로 마친다. 다양하게 옵션들을 섞어가면서 테스트 해가면 될 것이다. 다음 페이지에서는 BarChart에 대하여 추가적인 유용한 기능들 몇가지를 더 소개하겠다.

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

Tip & Tech

Copyright ⓒ 1997 ~, Deadfire Program Master