[FLEX CHART] 스크롤 챠트 - 1

챠트를 만들다보니 데이터가 큰 챠트는 문제가 있음을 발견하였다. 스크롤이 없어서 챠트가 화면에 표시될때, 눈에 보이지 않을정도로 작아진다는 것이다. openzet의 컨포넌트중 ChartZoomer를 이용하면 되겠지만, 이것또한 줌을 조작해야하는 공간이 필요하다. 그냥 단순히 스크롤을 만들고 싶다. 구글링을 하던중 몇가지 발견을 하여 여기에 포스팅을 한다.

일단 첫번째 방법으로 http://www.connectedpixel.com 에 소개된 방법을 이용해 보았다.

아래는 아무것도 쓰지 않은 그냥 일반 챠트다.

수많은 데이터가 존재하여 한눈에 차트를 볼수는 있지만, 정확히 무슨 내용인지 알기 힘들다는 단점이 있다. 그럼 여기에 스크롤바를 달아보자. 

스크롤이 달리니 한결 보기 편해졌다. 하지만 뭔가 이상하지 않나?? 그렇다... 바로 Y축이 스크롤을 할때 사라진다는 점이다. Y축이 사라지기 때문에 스크롤을 하여 가장 마지막 데이터를 볼때, 어떤 내용인지 잊어버릴수 있다. 

그럼...이것을 다른 방식의 스크롤을 사용해 보자.

Y축이 사라지지 않게 스크롤을 X축에 넣어서 만들었다. 훨씬 보기 편하며, 간결해진 모습이다. 하지만, 문제가 없을까?? 데이터를 한눈에 보고싶을땐?? 축소가 안되는것일까?? 음.. 여러가지 문제가 있다. 그러나 걱정 말자. 친절하게 아래와 같은 챠트도 있으니...

위 챠트는 줌을 이용하여 크기까지 변경이 가능하게 되어있으며, 스킨까지 적용하게 되어있다.

이러한 방식으로 X축이 아닌, Y축에 스크롤을 넣는 방법도 있다.

이렇게 챠트에 스크롤을 넣어서 만드는 방법이 있다는 것을 알게되었다. 소스는 위 사이트에서 직접 다운로드를 할수 있으며, 내가 만든 소스가 아니기 때문에 여기에 소스를 올리지 않을 것이다.

소스 다운로드 : http://www.connectedpixel.com/blog/scrollingcharts

그러나 위 챠트도 몇가지 문제점이 있다.

1> 현재 예제를 만들기 위해서 그랬을지는 모르겠지만, XML을 사용하고 있다. 이것을 ArrayCollection 으로 바꾸면 동작을 하지 않는다.

2> 내가 새로만든 커스텀한 챠트에 적용이 안된다. 

위 문제가 상관이 없다고 생각한다면, 누구나 쉽게 적용할수 있을것이다. 

[FLEX CHART] 스크롤 챠트 - 1 [FLEX CHART] 스크롤 챠트 - 2