NOTICE
공지사항
[업그레이드] HTML5차트 3.0->4.0
안녕하세요. 리아모어소프트의 홈피 운영자입니다.
2016년의 해가 새롭게 밝았습니다.
지난 2015년 한해동안 저희 리아모어를 사랑해 주신 고객여러분께 진심으로 감사드립니다.
2016년에는 고객여러분에게 더욱 좋은 솔루션으로 보답할 것을 약속드리며,
고객여러분의 하시는 일에 건승과 행운을 기원드립니다.
항상 건강하시고, 더욱 행복하시길 빕니다.
새해 복 많이 받으세요.
약 8개월에 걸쳐서 진행된 HTML5차트의 업그레이드 소식을 여러분에게 전할 수 있어,
한없이 기쁩니다. 그동안 휴일도 없이 고생하신 연구소의 차트 개발진에게도 이자리를 빌어 감사를 드립니다.
이번에 새롭게 발표되는 HTML5차트는, 4.0 버전으로서 정식 명칭은 아래와 같습니다.
기존 : rMate Chart for HTML5 v3.0 => 업그레이드 제품명 : rMate Chart for HTML5 v4.0
이번 업그레이드의 목표는 빅데이터의 분석을 통해 추출된 각종 통계데이터를 효율적으로 표현키 위한
통계용 차트를 다수 포함하였습니다. 이를 통해 다양한 종류의 수치데이터를 이에 맞는 차트로 표현코자 하였습니다.
이와 동시에 내부적으로는 저희 회사의 주력제품인 데이터그리드와 맵차트와의 프레임워크를 통일하여
제품간의 완벽한 연동성을 확보하였습니다.
이번 차트는 해외에도 거의 동시에 발표가 됩니다.
대한민국을 대표하는 차트로서 해외에서도 더 좋은 성과를 거둘 수 있도록 노력하겠습니다.
고객여러분들의 더욱 큰 사랑을 부탁드립니다.
이번 4.0 버전의 주요 업그레이드된 내역은 아래와 같습니다.
1. 차트 종류의 추가
o 다양한 종류의 통계용 데이터를 좀 더 효율적으로 표현하기 위하여 추가된 차트
- 박스플롯(BoxPlot) 차트 : BoxPlot 차트는 통계수치의 분포도중 25~75%의 구간을 Box로 표현하고,
5~95%의 구간까지는 연결선으로 나타내어 값의 분포를 표현키 위한 차트입니다.
- 에러바(ErrorBar) 차트 : ErrorBar차트는 통계수치 표준오차의 범위를 표준값과 같이 표현할 수 있는 차트입니다.
Line, Column, Bar, Area, Plot 차트와 조합하여 사용이 되어집니다.
- 히스토그램(Histogram) 차트 : Histogram 차트는 막대 2D, 3D차트를 이용하여, 통계수치값의 백분위를 연속된
구역으로 손쉽게 표현할 수 있는 차트입니다. 가로의 전체 구간의 합은 100%입니다.
- 벡터(Vector) 차트 : Vector차트는 바람이나 물, 경향성등의 흐름을 나타내는 데이터에서, 흐름의 세기와 방향을
표현할 수 있는 차트입니다. 높이 혹은 깊이에 따라 서로 다른 세기와 방향이 있을 경우에는 Level로 구분하여
표현하는 기능이 제공됩니다.
o 시각적 표현의 다양화를 위하여 추가된 차트
- 트리맵(TreeMap) 차트 : TreeMap 차트는 HeatMap 차트라고도 하는데, 큰 사각형의 영역을 데이타값의 크기에
비례하여 다수의 작은사각형으로 분할하여 표현하는 기법입니다. 사각형의 크기와 색상의 구분을 통해
좀 더 직관적인 이해를 제공하기 위한 용도입니다.
- 워드클라우드(Word Cloud) 차트 : Word Cloud차트는 글자의 크기와 색상을 통해 차별성을 표현합니다.
주로 빈도수에 따라 글자의 크기와 색상을 다르게 하여, 시각적인 주목도를 높이기 위한 용도의 차트입니다.
- 모션(Motion) 차트 : Motion Chart는 시간에 따른 데이터의 변화를 동적으로 표현키 위한 차트로서,
Start 및 Stop 버튼을 통해 움직임을 제어합니다. 시간의 흐름에 따른 데이터의 변화를 표현할때 유용합니다.
위의 새로운 차트들은 Premium License 이상에 대하여만 지원이 됩니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type 에서 보실 수 있습니다.
2. 기능의 추가
이번 4.0 버전에서 새롭게 추가 혹은 개선된 기능은 아래와 같습니다.
가. 프레임워크의 통합
저희 회사의 주력제품인 차트/그리드/맵차트 컴포넌트가 모두 동일한 알메이트 프레임워크에서 동작하도록
프레임워크의 통합이 이루어졌습니다.
이를 통해 차트와 그리드, 맵차트 제품은 완벽한 상호연동이 가능하도록 되어졌습니다. 즉 그리드에서 만들어진
데이터를 차트로 표현하거나, 맵차트에서 만들어진 데이터를 그리드로 표현하고자 할때 손쉽게 연동이 이루어질
수 있게 되었습니다.
나. 범례의 체크박스 기능의 개선
기존에는 범례의 체크박스 기능을 통해 해당 그래프의 표시를 On/Off 할 수 있었습니다. 이때, 범레의 색상마커와
체크박스가 함께 표시되어 공간을 차지하게 되는 불편이 있었습니다.
이번 4.0 버전에서는 색상마커가 체크박스 기능을 같이 할 수 있도록 통합을 하였습니다. 색상마커에 마우스를
click하면 해당 범례의 표시가 On/Off 됩니다.
또한 범례의 Off 시에, Off 된 차트를 제외하고, 남아있는 차트의 데이터에 기반해서, 차트를 재구성하여 다시
그리게 되며, 다중 축을 사용할 경우에는 Off된 차트의 축은 출력을 하지 않게 할 수 있습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Type => Column => Multi Series 에서
범례의 색상마커 클릭
다. Drill Down 기능
기존에는 Drill Down 기능을 구현하고자 할 경우에는 차트에서 click 이벤트를 받아, 동일영역 혹은 다른 영역에
다시 차트를 그려주는 자바스크립트 함수를 call하고, 이전으로 back 할 경우, 다시 데이터를 넣어주어야 하는
번거로움이 있었습니다.
이번 4.0에서는 방식은 동일하되, 데이터를 기억하고 있어, Drill Down 및 Drill Up시에 더욱 편리하게
할 수 있게 하였습니다. Drill Down의 깊이에는 제한이 없습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 이벤트 => 클릭시 드릴다
운(Column) 혹은 클릭시 드릴다운(Pie)
라. 차트의 이미지 저장 및 PDF 저장 기능
화면에 보여진 차트를 이미지로 저장할 경우, 기존에는 이미지의 스냅샷을 뜨고, 브라우저의 image 저장기능을
이용하는 2단계를 거쳤습니다.
이번 4.0 버전에서는 한번의 버튼 클릭으로 이미지를 바로 저장할 수 있도록 개선이 되었습니다.
또한 차트를 PDF로 저장하는 기능도 새로이 포함되어졌습니다.
다만 이 두가지 기능은 IE7,8 에서는 지원이 되지 않습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 차트 이미지 변환 =>
로컬로 이미지 저장
마. 모바일에서의 확대/축소 기능의 개선
이번 4.0버전에서는 모바일화면에서, 핀치줌(손가락 두개를 사용하여 확대/축소)형태의 인터페이스를 통해
확대/축소가 되도록 개선되었습니다.
이 확대/축소는 브라우저의 확대/축소기능을 의미하는 것이 아니며, 제품자체에서 지원하는 특정영역의
확대/축소를 의미합니다.
예제 : 모바일 단말에서 : http://demo.riamore.net/m/chart/index.html (모바일 데모) => Technic => Zoom in /
Zoom out
바. 추세선 그리기 기능
이번 4.0 버전에서 추가된 특이사항으로, 차트내부적으로 데이터를 분석하여 추세선을 그려주는 기능이 추가되었습
니다. 제공되는 추세선의 알고리즘은 선형 추세선, 이동평균선 추세선, 다항식 추세선, 거듭제곱 추세선, 지수 추세
선, 로그 추세선의 6가지 종류가 지원됩니다. 이중 원하는 추세선을 선택하여 표시할 수 있습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 추세선 표시
사. HTML Table 데이터 / CSV 데이터의 지원
기존에는 XML, JSON, 자바스크립트 Array의 데이터형식을 지원하였으나, 이번 4.0 버전에서는 HTML의 Table tag에
서 사용되어지는 데이터 및 CSV (Comma Seperated Value) 형식의 데이터도 지원을 하게 되었습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 데이터 생성 및 연동방식
=> CSV URL 데이터로 생성, 테이블데이터로 생성
아. 차트의 데이터를 CSV 포맷으로 저장
차트의 데이터를 csv 포맷으로 저장하는 기능이 새로이 추가되었습니다.
저희 차트에는 데이터에디터를 통해서 차트데이터의 값을 변경하면서 시뮬레이션을 할 수 있는 기능이 있습니다.
이렇게 변경한 값을 저장코자 할 경우, 이 기능을 사용하면 손쉽게 csv 데이터 형식으로 저장하실 수가 있게
됩니다. csv 데이터는 엑셀에서 열어볼 수 있습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 기타기능 => 차트 데이터
CSV 저장
자. 신규 이펙트의 추가 ( Clip Effect )
라인차트를 그릴때 연필로 선을 그리듯이 시작점에서 끝점까지 그려나가는 형태의 Series Clip 이펙트가 새롭게
추가되었습니다.
이 이펙트는 라인차트에서 지원이 되며, 다만, IE7과 IE8에서는 지원이 되지 않습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 이펙트 => Series Clip
차. 이징(Ising) 함수의 추가 ( Bounce Effect )
이징이라는 용어가 업무분야마다 다르게 사용되고 있어, 저희들이 사용하는 단어의 의미부터 먼저 정의한다면,
차트를 그리고 난 후에 용수철에서 튀어나온 것과 같은 떨림을 줌으로서, 동적인 효과를 제공하는 방식을
이징(Ising)이라고 내부적으로 정의하고 있습니다.
가령 막대 차트를 그리고 난 이후 끝부분에 떨림의 효과를 줌으로서, 더욱더 멋을 추구하게 하는 방식입니다.
손쉬운 이해를 위하여, Bounce 이펙트라고 보시면 됩니다.
이번 4.0 버전에서는 이러한 이징함수가 새롭게 추가되었습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 이펙트 =>
SeriesInterpolate Bounce
카. 컬럼차트 / 바차트에서의 연결선에 수치를 표시하는 기능
컬럼차트와 바차트는 막대의 끝선을 연결하여 표현하는 연결선 잇기가 제공이 됩니다.
이번 4.0 버전에서는 연결선만 잇는 것이 아니고, 연결선의 상/하에 변동된 값을 표시할 수 있는 기능이 추가되었습
니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Type => Column/Bar => Stacked(연결선)
타. 기타 추가된 기능
o 마우스 over 혹은 클릭시에 강조기능 : 차트의 그래프 영역에 마우스가 over되거나, 클릭을 하게 되면 해당부분을
강조하는 기능이 추가가 되었습니다. (단 IE 7,8에서는 지원하지 않습니다.)
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Type => Column => Multi Series
막대차트에 마우스 over 혹은 click
o 십자선 표현 방식의 변경 : 십자선은 마우스가 위치하는 지점에서 X축과 Y축방향으로 선을 그어서, 현재 값이
무엇인지를 나타내기 위한 유용한 도구입니다.
기존에는 마우스의 이동시에 모든 지점에서 십자선을 그렸는데, X축과 Y축이 값의 변동이 있는 시점에만
십자선의 이동을 표시할 수 있도록 알고리즘을 수정하였습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 선/범위/배경 =>
마우스이동에 따른 십자가
o Y축 타이틀의 제목을 가로방향으로 적을 수 있습니다. 기존에는 Y축의 타이틀을 세로방향으로만 적을수 있었
는데, 이번 4.0에서는 가로방향으로도 표현이 가능토록 하였습니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Properties => 축설정 => 축 꾸미기
o Tree Map에서 색상의 범위범례를 최초로 적용하였습니다.
TreeMap 차트에서 보시면 범위가 주어진 범례가 있습니다. 이번 4.0에 처음으로 범위범례를 적용하였습니다.
범위범례는 단지 몇개의 범례로만 표기하기 어려운 연속적인 수치의 범례를 표현하고자 할때 유용합니다.
예제 : http://demo.riamore.net/HTML5demo/chart/index.html => Chart Type => TreeMap => TreeMap Range
이번 4.0에 업그레이드된 모든 기능은 www.riamore.net -> Component -> Chart HTML5 데스크탑 데모보기에서
직접 확인할 수 있으며, 평가판을 다운로드 받으셔서 사용해 보실 수 있습니다.
기존에 Enterprise 라이선스를 구매하셨던 고객께서는 무상으로 업그레이드를 받으실 수 있습니다.
각고의 노력끝에 4.0버전을 발표하게 되어 한없이 기쁜마음입니다.
이렇게 업그레이드 버전을 발표하게 하여주신 고객여러분에게 다시한번 감사드리며,
세계로 뻗어나가는 제품이 될 수 있도록 더욱 노력하겠습니다.
고객여러분 올 한해는 더욱 건승하시고, 건강하시기 바랍니다.
새해 복많이 받으세요.
감사합니다.
= 리아모어소프트 홈피 운영자 올림 =