NOTICE
공지사항
[업그레이드] 알메이트-차트(HTML5) 6.0 버전 출시
안녕하세요. 리아모어소프트의 홈피 담당자입니다.
그동안 오랫동안 기다려왔던 차트 6.0 제품의 출시를 알려드립니다.
제품출시를 기다려 주신 고객여러분께 진심으로 감사드립니다.
따뜻한 봄날 만큼이나, 많은 사랑을 받을 수 있었으면 좋겠네요...
o 업그레이드 : 기존의 5.0 버전 => 6.0 버전으로 업그레이드.
이번 업그레이드는 모바일 환경에서의 속도개선에 가장 많은 시간을 투자하였습니다.
차트 외형적으로는 큰 변화가 없으나, 내부적으로 구조자체를 많이 변경하였습니다.
모바일 환경에서 더욱 빨라진 속도를 느끼실 수 있을 것입니다.
또한 새로운 차트타입이 추가되었으며, 많이 사용되는 차트들에서의 디테일 기능들이 보강되었습니다.
문법이나, 외형의 변화는 없기 때문에, 기존 5.0 버전 사용고객은 6.0 버전으로 수정없이 업그레이드를 하실 수 있습니다.
업그레이드 된 주요내역은 아래와 같습니다.
I. 업그레이드 제품명 : rMate Chart for HTML5 v6.0 (기존 5.0에서 6.0으로 업그레이드)
II. 업그레이드 내용 :
1. 모바일 환경에서의 속도개선.
그동안 고객들중 모바일 환경에서 속도가 느리다는 의견들이 간혹 있었습니다.
스마트폰의 성능이 갈수록 좋아짐으로 인해 속도에 크게 민감하지 않을 것으로 보았으나, 이번 개편을 통해
다양한 종류의 모바일 환경에서도 사용에 문제가 없도록 속도개선에 많은 시간을 투자하였습니다.
최신의 스마트폰 환경에서는 거의 구분이 되지 않으나, 구형 스마트폰등에서는 속도의 차이를 느낄 수 있을 것입니다.
=> 데모페이지 : http://www.riamore.net/component/chart.html -> HTML5 (v6.0) 모바일 데모보기 클릭
2. 신규 차트의 추가
금번 6.0 에 새롭게 추가된 차트들 입니다.
가. 범퍼차트 (Bump Chart) 의 추가
범퍼차트는 주로 순위의 변동을 표현코자 할때 사용되는 차트입니다.
가령 년마다 국가별 올림픽 메달의 순위변동, 년마다 대기업의 매출순위 변동 등을 차트로 표현코자 할때
아주 유용한 차트입니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Bump Chart
나. 롤리팝 차트 ( Lollipop Chart )
기존 이미지 차트 (Image Chart)의 경우 사용될 이미지를 선택하고, 이를 적용.조정하다보면,
시간의 소요가 많아, 유용한 차트임에도 불구하고, 사용성이 떨이지는 문제가 있었습니다.
롤리팝 차트는 이미지 차트에서 이미지 대신에 간단한 도형으로 대체하여 표현할 수 있게 하였습니다
제공되는 도형의 종류는 : Circle, Triangle, Rectangle, Diamond, InvertedTriangle 의 5가지 Type입니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Lollipop Chart
다. 듀얼 파이차트
이는 새로운 차트의 종류를 추가한 것이라기 보다는 기존 파이차트를 향상시켜,
클릭시에 회전하는 이펙트를 추가하여 파이차트 두 개를 멋지게 표현토록 하는 형태의 차트입니다.
직접 보시는 것이 더 낫겠지요..
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Pie -> Dual Pie Chart
라. 목표 대비 실적차트의 업그레이드
국내 및 해외에서 고객분들이 가장 좋아하는 차트중의 하나가 목표대비 실적 차트입니다.
이번 6.0 버전에서는 다양한 형태의 목표 대비 실적차트를 대폭 보강하였습니다.
이를 통해, 목표 대비 실적차트는 아마 세계 최고차트가 아닌가 합니다.
A. 컬럼 색 채우기 타입의 목표 대비 실적 차트 추가
바로 보시는 것이 가장 잘 이해 되시겠지요.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Target vs Actual ->
Linear 2D Color
B. 컬럼 오버랩(overlap) 타입의 추가
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Target vs Actual ->
Linear 2D Overlaid
C. Dash and Dot 타입의 추가
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Target vs Actual ->
Dash Dot
마. 4분면 플롯(Plot) 차트
기존 Plot 차트(Scatter 차트라고도 함)를 사용하는 고객들중 이를 4분면에 표현하고자 요구가 꽤 있습니다.
이번 6.0 버전에서는 좌우축형태의 차트를 4분면축으로도 표시할 수 있도록 하는 기능이 추가되었습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Plot -> Plot - 사분면
2. 기존 차트의 기능향상
가. 바 및 컬럼차트에서 특정 항목에 대하여 테두리 선 설정기능
데이터 강조기능 보강의 하나로서,
차트에서 특정 항목을 강조하기 위하여 기존에는 차트의 색상을 통해서 이를 구현하였습니다.
이번 6.0 에서는 테두리 선에 강조기능을 줄 수 있도록 하여 더욱더 멋진 표현이 가능합니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Column -> Column
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 시리즈디자인 ->
컬럼차트 조건별 테두리 색상 결정하기
나. 라인 및 영역차트에서 특정 데이터 포인트의 아이템렌더러의 모양/크기/색/선굵기/선색 을 다르게 표현
기존 5.0 버전까지는 라인차트에서 데이터 포인트의 아이템렌더러는 하나의 모양만 가능하였으나, 이번 6.0에는
서로 다른 모양의 아이템렌더러를 표현가능합니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 시리즈디자인 ->
라인차트 조건별 아이템 렌더러 결정하기
다. 차트내의 특정영역에 선 및 화살표 긋기 및 코멘트 기능
차트내의 특정영역의 일부에 대하여 선(화살표 포함)긋기 기능 및 이에 대한 코멘트를 붙일 수 있는 기능입니다.
차트의 특정 값을 강조할때 설명라인으로서 활용하면 유용하게 사용될 수 있을 것입니다.
또한 차트크기가 변경되더라도 자동으로 위치가 맞추어지게 됩니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 선/범위/배경 ->
특정부분에 화살표 선긋기
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 시리즈디자인 ->
라인차트 조건별 아이템 렌더러 결정하기
라. 패턴차트의 보강
패턴차트는 색맹인 사람들을 위한 기능으로, 기존에는 차트에 패턴을 적용할 경우 흑백으로만 표시되게 하였습니다.
이번 6.0에서는 차트의 고유색상에 패턴을 입힐 수 있도록 변경을 하였습니다. 즉 컬러+패턴이 적용될 수 있습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 시각장애인을
위한 패턴적용
마. 컨텍스트 메뉴의 추가
차트 영역에서 마우스 오른쪽버튼을 클릭시에 save as png/jpg/pdf 및 save data as csv 라는 기능이 포함된
컨텍스트 메뉴를 default로 표시되게 하였습니다.
이 기능을 끄고자 할 경우 옵션을 통해 제외시킬 수 있습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 기타기능 ->
컨텍스트 메뉴 출력하지 않기
바. Plot Chart에 라벨 표시기능
기존에는 Plot Chart의 경우 라벨을 표시하지 못하고, 툴팁으로만 Plot 의 값을 확인하였으나, 이번 6.0버전에서는
Plot에 라벨을 표시할 수 있도록 하였습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Plot -> Plot
3. 기타 소소한 보강사항
가. 차트내의 메모의 위치변경의 문제
기존 5.0버전 이하에서는 차트내의 특정위치에 메모를 삽입하였을 경우 차트의 전체 크기가 변경이되면,
메모의 위치가 변동되지 않는 문제가 있었습니다. 메모의 위치조정을 물리적인 픽셀로만 조정하기 때문에 발생한
문제입니다.
이번 6.0 버전에서는 메모의 위치를 비율로 조정할 수 있도록 하였습니다.
이로서 차트의 크기가 변경될때, 메모의 위치도 변경된 크기에 맞추어 자동으로 조정되게 하였습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 제목/메모추가 ->
기본메모
나. 축 레이블 자동 개행 처리
축에 표시되는 레이블의 길이가 다른 레이블보다 특별히 긴 경우에, 기존에는 개발자가 태그를 통해
개행처리를 해 주어야 했으나, 이번 6.0 버전에서는 자동으로 개행처리하는 기능이 추가되었습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 축 라벨 설정 ->
X축 라벨 자동개행 처리 / Y축 라벨 자동개행 처리
다. 라벨의 중복을 회피할 수 있는 기능의 제공
컬럼/바/라인/영역/플롯 등의 차트가 복잡하여, 라벨이겹쳐서 보여지게 될 경우, 자동으로 겹쳐지는 라벨이
표시되지 않게끔 하는 기능이 추가되었습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 시리즈 수치표시 ->
플롯차트 겹치는 라벨 자르기
라. 원게이지 안의 label에 클릭이벤트 제공
Simple Gauge, Half Simple Gauge, Multi Simple Gauge 등에서 원안에 있는 라벨에 클릭을 할 경우 이에 대한
이벤트를 전달하는 기능이 추가되었습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Gauge
마. 3D 컬럼/바 차트에서 레이블의 위치수정
3D 컬럼/바 차트의 경우 축의 레이블 위치를 계산하는데 있어 입체감을 살릴 수 있도록 하다보니, 수학적인 위치와
사람의 눈으로 보기 편한 위치가 일치하지 않는 면이 있었습니다.
그동안에는 수학적인 위치를 기준으로 표현을 하였는데, 이번 6.0 버전부터는 사람의 눈이 보기 편한 위치에 라벨을
표시할 수 있게 하였습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Column -> Column 3D
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Type -> Column -> Bar 3D
바. SubLegend 에서 ItemRenderer의 모양을 다르게 표현가능
기존에는 SubLegend의 경우 ItemRenderer의 색상은 서로 다르게 할 수 있었으나, 모양은 하나로만 표현이 되었습니다.
이번 6.0 버전에서는 모양도 서로 다르게 표시할 수 있게 하였습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 범례 ->
SubLegend ItemRenderer
사. 범례에서 아이템 클릭시, 강조여부 선택기능
기존에는 범례에서 아이템 클릭시, Item의 visible 여부만 선택되었으나, 강조여부도 표현가능하도록 옵션이
추가되었습니다.
=> 데모페이지 : http://demo.riamore.net/HTML5demo/chart/index.html -> Chart Properties -> 범례 ->
범례 클릭하여 강조
4. VUE, REACT, Angular JS 지원 예제 제공
최근 급격히 인지도를 높이고 있는 javascript 프레임워크인 VUE, REACT, Angular JS 등에서 rMate Chart를 사용할 때
좀 더 손쉽게 사용할 수 있도록 예제를 만들어 두었습니다.
이를 참고하시어 개발하신다면, 개발을 효율을 높이실 수 있을 것입니다.
예제들은 제품(평가판 포함)내 -> Samples -> extjs 라는 디렉토리에 각 프레임워크별로 들어가 있습니다.
많은 도움이 되시길 바랍니다.
5. 메뉴얼 개편
기존에는 차트의 메뉴얼은 사용설명서 PDF 파일과 개발자 API html 파일의 두가지로 제공이 되었습니다.
이번 6.0 에서는 사용설명서가 pdf에서 html로 각 주제별로 좀 더 쉽게 이해할 수 있도록, 세밀하게 정리하였습니다.
많은 시간을 들여서 이용자들이 조금더 손쉽게 이해할 수 있도록 체계를 갖추었으니, 많은 도움이 되시길 바랍니다.
pdf 파일이 필요하실 경우 저희 회사로 연락을 주시면 별도로 파일로도 송부드립니다.
6. 차트 실행 js 모듈의 단일화
기존에는 차트의 종류별로 구분하여 js 파일을 만들어 두었습니다. 통합파일명은 rMateIntegrationH5.js 였습니다.
이번 6.0버전에서는 차트의 종류별로 구분되던 것을 rMateChartH5.js 하나에 모두 통합하여 제공합니다.
기존에 rMateIntegrationH5.js 를 사용하시던 고객은 rMateChartH5.js로 명칭을 변경하시면 됩니다.
7. 라이선스 처리 방식의 변경
기존에는 평가판 제품과 정품 제품을 분리하여 운영을 하였습니다.
그러나 이러한 분리운영이 많은 혼돈과 관리의 어려움을 낳기도 하였습니다.
이번 6.0 버전부터는 평가판 제품과 정품을 별도로 구분하지 않고, 라이선스 키 하나로 제어가 되도록 수정을
하였습니다.
이상과 같이 6.0 버전에서 업그레이드 된 내역을 안내드렸습니다.
이번 개편된 데모는 www.riamore.net -> Component -> Chart HTML5 데스크탑 데모보기에서 직접 확인하실 수 있습니다.
또한 누구나가 평가판을 다운로드 받으셔서 사용해 보실 수도 있습니다.
Enterprise 라이선스를 구매하신 고객께서는 무상으로 업그레이드를 받으실 수 있습니다.
이번 6.0 제품은 기존 5.0 제품의 모든 기능을 그대로 지원하오니, 기존 개발된 내역은 수정없이 6.0으로 업그레이드가 가능합니다.
다만, 6.0 버전부터는 IE 7,8에서는 동작하지 않으며, IE9 이상에서만 사용이 가능합니다.
관련된 문의는 02-2655-9767 혹은 riamore@riamore.net으로 문의주시기 바랍니다.
저희 알메이트 제품을 사랑해주시는 고객님께 진심으로 감사드리며,
언제나 행복이 가득하시길 기원드립니다.
감사합니다.
= 리아모어소프트 홈피 운영자 올림 =