NOTICE
공지사항
[업그레이드] 알메이트-차트(HTML5) 5.0 버전 출시
안녕하세요. 리아모어소프트의 홈피 운영자입니다.
온 산천을 꽃의 향연으로 물들이는 2017년의 봄이 왔습니다.
매화꽃이 채 떨어지기 전에, 산수유와 목련꽃이 화들짝 피어나고, 하룻밤새에 개나리가 담장을 노랗게 물들입니다.
색색의 봄소식과 함께, 그동안 약 9개월간에 걸쳐서 개발하여온 HTML5 차트제품의 버전업 소식을 전해드리고자 합니다.
그동안 개발하느라 수고하신 개발팀원들에게 무한한 감사를 드리며,
또한 저희 제품을 아껴주시는 고객여러분들에게 더 큰 감사를 드립니다.
이번에 업그레이드 된 제품은 HTML5 차트 5.0 제품으로 정식명칭은 rMate Chart for HTML5 v5.0 입니다.
- 제품명칭 : rMate Chart for HTML5 v5.0
- 출시유형 : 기존 4.0 버전에서 5.0 버전으로의 업그레이드
- 업그레이드의 목표 :
. 데이터의 특정 조건이 발생할 경우, 이에대한 다양한 이벤트 액션을 표현케 함으로서 차트를 더욱더 생동감있게 보이게
하고자 하였습니다.
. 국내와 국외 모두에서 통할 수 있는 차트의 디자인 개편을 목표하였습니다.
. 최근의 추세인, 간단하면서도 주목도가 높은 차트류( 이미지매트릭스, 게이지차트의 simple 타입)를 보강코자
하였습니다.
- 5.0 버전은 약 1개월 후에 영문화하여 해외에도 출시될 예정입니다.
다시한번 성원에 감사드리며, 이번 5.0 버전이 고객여러분들에게 큰 기쁨을 드릴 수 있기를 기원드립니다.
이번 5.0 버전의 주요 업그레이드된 내역은 아래와 같습니다.
1. 차트 종류의 추가
가. Event Chart :
이벤트 차트는 오랫동안 고민해왔던 기능으로서 드디어 5.0 버전에 포함하게 되었습니다.
이벤트 차트의 핵심은 데이터의 값들 중에서, 특정 조건 혹은 값이 발생 혹은 만족할 시에 이를 차트 영역내에
알려줄 수 있는 기능으로서,
알림의 방법은 CSS를 통한 강조나 깜박임등을 줄 수 있으며, 로울링 문자판이나, 이미지 등을 표시할 수 있습니다.
표시되는 위치는 화면전체 혹은 데이터가 발생한 지점에 표시가 가능합니다.
예를들어, 올해의 매출목표가 9월달에 만약 달성을 하였다면, 차트가 보여질때 빵빠레 아이콘이나,
이미지를 화면 가득하게 표시하고, 잠시후에 차트가 보여지게 할 수 있는 기능입니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Event
나. Gauge Chart 의 보강 :
최근 게이지 차트에 대한 요구가 증가되고 있습니다. 복잡한 게이지 차트가 아니라, 아주 단순한 형태의 요구입니다.
이러한 추세에 발맞추어서 간단한 형태의 게이지 차트(Simple Gauge 와 Horizontal & Vertical Gauge)를 추가하였습니다.
대시보드등에서 하나의 값만을 간단히 백분율의 그림으로 표현할때 유용하게 사용될 것 같습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Gauge ->
Simple(,HalfSimple, Multi Simple, Horizontal, Vertical) Gauge
다. ImageMatrix :
특정 이미지를 반복적으로 matrix 형태로 배치하여 상호 비교하는 차트가 해외의 인포그래픽에서 자주 사용되면서,
이러한 유형이 급속히 확산되고 있는 추세입니다. 이러한 추세를 반영하여, 금번에 ImageMatrix 차트를 포함하게 되었습니다.
다양한 이미지를 통해서, 손쉽게 그림으로 상호 비교하여, 가시성을 높일 수 있는 차트 입니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> ImageMatrix
라. WindRose Chart :
원래는 바람의 방향을 표시하기 위하여 만들어진 차트(이름에서도 보여짐)이나, 최근에는 일반 업무에서도 사용이 되고 있습니다.
둥근 원이 주는 안정감과 부드러움을 이용하여, 방향 및 크기표시를 통해 데이터의 시각화에 도움이 될 것입니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> WindRose
마. Equalizer Chart :
이퀄라이즈 차트는 음향기기등에서 많이 표현되어지는 차트형태로, 막대차트와 거의 동일하나, 누적적으로 얇은 블럭을 쌓는 모양을 통해,
실시간의 동적 변동성을 표현하는데 유용합니다. 주로 모니터링 대시보드 등에서 유용하게 사용되어집니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Equalizer
바. Pyramid, Funnel, Overlay Bubble Chart
전체 데이터가 단계적으로 필터링되어, 좁혀질때 이를 표현하는 방법은 피라미드와 깔대기(Funnel)가 일반적입니다.
그동안에는 이런 차트를 찾는 고객이 국내에는 많지않아, 미루고 미루어 두다가 이번에 개발을 하게 되었습니다.
더불어, Overlay Bubble 형태도 같이 포함하여 개발을 하게 되었습니다. 아마도 Overlay Bubble이 조금더 유용치 않을까 여겨집니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Pyramid
2. 차트의 디자인 변경
그동안 차트 4.0 버전의 디자인은 고객들에게 좋은 평가를 받아 왔습니다. 그런데 기존 4.0의 디자인이 다소 동양적인
색상으로서 밝은톤을 기본으로 하고 있어, 해외에서 약간 어색하게 받아들여지는 경우들이 있어온 것이 사실입니다.
또한 4.0 버전에서는 모든 차트가 공통의 색상순번에 따라 표현이 되었습니다.
이번 5.0 버전에서는 차트의 색상 및 축의 모양, 3D모양 등 전반적인 변형을 통해 한층 더 아름다운 차트를 만들고자 많은 시간을
투자하였습니다. 이를통해 동양 및 서양인들 모두가 좋아할 수 있는 색상으로 교체를 하였습니다.
차트를 직접 보시면 아마 큰 만족을 느끼시리라 믿습니다.
또한 이번 5.0 에서는 라인, 막대 차트등의 차트종류에 따라 색상 순번이 다르게 구성이 되었습니다.
이를통해 차트마다 최고의 색상이 표현될 수 있도록 하였습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type 의 전체메뉴에서 확인하실 수 있습니다.
3. 기능의 추가 및 개선
가. 축라벨 그룹핑 기능 :
X축의 아래 라벨에 1월 2월 3월.... 12월을 적고, 다시 1월 2월 3월을 묶어서 1/4 분기 라고 그룹해서 표현할 수 있는 그룹핑 기능을
추가하였습니다. 그룹핑은 다단계가 가능합니다. (1/4분기 2/4분기를 다시 묶어서 상반기와 같이..)
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 축라벨설정 -> 그룹핑 라벨 출력.
나. 라인차트의 끝에 시리즈 명을 나타내는 기능
하나의 차트내에 여러개의 라인을 그릴때 각각을 구분하는 방법은 통상 라인의 색상을 서로 다르게 하고, 차트아래에 범례를 두어서
범례를 통해 색상의 시리즈 명을 적어주는 것입니다. 가령 빨간 선은 2014년도, 파랑선은 2015년도, 녹색선은 2016년도와 같이 범례에
색상과 명칭을 적게 되지요... 그러나, 이번에 새롭게 추가된 기능은,
차트에서 선이 끝나는 끝지점에 시리즈의 라벨을 붙이는 기능을 추가하였습니다.
범례가 불편한 경우에 유용하게 사용될 수 있을 것입니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Line -> Line+Series DisplayName
다. 차트내의 아이템 다중 선택 / 선택된 데이터의 확인 / 외부에서 차트 아이템을 선택케 하는 기능
Case 1 : 플롯차트는 차트영역내에, 작은 원이나, 점을 찍어 분포도를 나타낼때 유용하게 사용되어지는 차트입니다. 그런데 만약 찍혀진
원/점의 특정영역을 드래그하여, 그 영역안에 찍힌 점의 갯수와 값을 알고자 할때가 있습니다.
기존에는 한개의 점만 찍어서 이를 확인할 수 있었으나, 이번 5.0 에서는 드래그를 통한 다중선택이 가능하게 되었습니다.
Case 2 : 데이터그리드와 차트를 연동하여 표현 하는 경우, 그리드에서 선택한 값과 매칭되는 차트의 색상을 하이라이트 시킬때
(즉 외부에서 차트내부의 아이템을 선택케 함) 기존에는 값 한개씩만 상호 매칭이 되었으나,
이번 5.0 버전에서는 다중 선택된 값과 매칭된 차트를 하이라이트 할 수 있게 되었습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Column -> Column 에서 마우스 드래그로
여러 아이템을 잡음.
라. 파이차트에 범례 켜고, 끄기
알메이트-차트는 범례의 색상에 마우스 클릭시 해당 범례를 ON/OFF 할 수 있습니다.
그러나, 지금까지는 파이차트에는 이를 적용하지 못하고 있었습니다. 이번 5.0 버전에서는 파이/도넛 차트에서도 범례의 색상에
마우스 클릭을 통해서 해당 값을 ON/OFF 할 수 있도록 하였습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Pie -> Pie
마. 데이터팁(툴팁) 개선
이번 5.0 버전을 사용해 보시면 만족스러운 것 중의 하나가 아마도 툴팁일 것이라 여겨집니다.
툴팁이 나타나고 사라질때, 혹은 이동할때 부드러운 느낌을 받으실 수 있을 것입니다.
이번 툴팁 개편을 통해 축단위의 툴팁이 새로이 추가되었으며, 툴팁의 액션이 훨씬더 부드러워 졌습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 데이터팁(툴팁)
바. 서로 다른 차트간의 십자선 연동방식
가령, 하나의 웹화면에 두개의 서로 다른 차트가 표시될때, 위의 차트는 미국의 월별 매출액이라고 하고, 아래의 차트는 중국의
월별 매출액이라고 가정합니다.
미국의 월별 매출액 차트에 마우스를 over하여 십자선으로 값들을 표시하게 할때, 아래의 중국 차트에도 자동으로 십자선이 나타나서
상호 비교를 좀 더 쉽게 할 수 있도록 차트간의 십자선 연동이 가능토록 하였습니다.
이는 예제를 통해서 확인하시면 바로 이해가 되시리라 봅니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 여러차트사용 -> 다른 차트와의
십자선 동기화
사. 기타
- Y축의 시작점(Bottom) 혹은 끝점(Top)에 타이틀 출력 : Y축의 제목의 경우 기존에는 Y축의 중간쯤에 가로 혹은 세로로만 표현이 되었으나,
이번 5.0 버전에서는 Y축의 위와 아래에 제목을 적을 수 있도록 하였습니다.
- 스크롤 차트에서 마우스 휠로 스크롤 기능을 동작케 하도록 하였습니다.
- 파이차트에서 콜아웃 라벨을 표시할때 콜아웃을 위한 선을 기존의 직선에서 곡선으로도 표현이 가능토록 하였습니다.
- 차트 실행시에 ChartVars 의 콜백함수 설정 방법외에 콜백함수를 등록하는 방법이 추가되었습니다.
- 라인차트와 영역차트에의 범례의 모양을 기존 사각형에서, 라인은 직선, 영역은 직선+영역표시가 있는 범례형태로 수정이 되었습니다.
- 차트 아이템 선택시에 강조효과의 알고리즘을 수정하여, 조금더 깔끔한 선택의 강조효과를 보실 수 있습니다.
이상이 5.0에 업그레이드된 내역입니다.
5.0에서 바뀐 디자인 및 업그레이드된 기능은 www.riamore.net -> Component -> Chart HTML5 데스크탑 데모보기에서
직접 확인할 수 있으며, 평가판을 다운로드 받으셔서 사용해 보실 수 있습니다.
또한 Enterprise 라이선스를 구매하셨던 고객께서는 무상으로 업그레이드를 받으실 수 있습니다.
이번 5.0 버전이 고객에게 더 큰 만족을 드릴 수 있기를 희망하여,
더불어 세계시장에서도 큰 호응을 받을 수 있을 것으로 확신합니다.
다시한번 고객여러분들의 사랑에 감사드리며,
언제나 더 좋은 제품으로 보답토록 하겠습니다.
감사합니다.
= 리아모어소프트 홈피 운영자 올림 =