BIX5는 빅데이터 시대의 다양한 데이터를 손쉽게 시각화하여 한눈에 보여주기 위한 대시보드 솔루션으로서 Full HTML5(W3 국제표준 규격)로 개발된 국내 최초, 그리고 2019.10. 현재 국내 최고의 범용대시보드 입니다. 


제품에 대한 자세한 소개는 여기를 클릭하십시오. 

대시보드의 사전적 정의는 다음과 같습니다.


「웹에서, 한 화면에서 다양한 정보를 중앙 집중적으로 관리하고 찾을 수 있도록 하는 사용자 인터페이스(UI) 기능. 여러 종류의 웹 기반 콘텐츠를 재사용할 수 있도록 구성하고, 문서, 웹 페이지, 메시징, 미디어 파일 등 다양한 콘텐츠를 한 화면에서 관리한다. 특징으로는 의사 결정과 작업 분석에 적절한 정보 제공과 사용자 및 그룹 관리가 용이하고, 무선 응용 통신 규약(WAP) 전화, 휴대형 PC 등 이동 장비 지원이 가능하다.」 (네이버 지식백과 참조)


다시 말해 대시보드는 하나의 화면에서 다양한 데이터를 차트, 표, 지도, 영상, 이미지, 텍스트 등으로 시각화하여 제공함으로써 사용자가 정보를 얻거나 의사 결정에 필요한 중요한 데이터를 한눈에 확인할 수 있도록 합니다.


HTML5는 W3C(World Wide Web Consurtiom)에서 국제 표준으로 확정(2014년 10월 28일)한 웹 프로그래밍 언어입니다. 기존 HTML이 텍스트와 하이퍼링크만 표시하던 것과 달리 HTML5는 멀티미디어 등 다양한 애플리케이션까지 표현 · 제공하도록 진화하였습니다.


예를 들어 HTML5는 오디오 · 비디오 · 그래픽 처리, 위치정보 제공 등 다양한 기능을 제공하기 때문에, ActiveX 등과 같은 별도 프로그램을 설치하지 않고도 어느 웹 브라우저에서나 이용할 수 있습니다.

Bix5는 국내 최초로 HTML5를 100% 준수하여 자체 개발되었습니다.


BIX5는 모든 OS에서 작동합니다.
왜냐하면 BIX5 100% 국제표준 HTML5 기반으로 개발된 제품이기 때문에 OS(Windows, UNIX, Linux, iOS )와 상관 없이 모든 시스템에서 작동 가능합니다.

BIX5는 국제표준인 HTML5를 지원하는 모든 브라우저(IE10 이상, 크롬, 파이어폭스, 사파리 등)에서 작동 가능합니다.

BIX5는 인터넷을 지원하는 모든 디바이스(PC, 스마트폰, 태블릿, 스마트TV 등)에서 기종과 상관없이 사용 가능합니다

BIX5는 국제 기술 표준 규격인 HTML5를 100% 사용하여 개발되었기 때문에 ActiveX 나 Plugin 등 프로그램을 추가로 설치할 필요가 전혀 없습니다. 


BIX5는 아직까지 사용자 환경에서 ActiveX 나 Plugin 등 별도 프로그램을 필요로 하는 대시보드 및 부분 HTML5 대시보드를 사용하시는 분들의 불편함을 해결할 수 있을 뿐만 아니라 별도 플러그인을 설치함으로써 발생될 수 있는 보안사고 우려까지도 해소할 수 있는 최적의 솔루션으로 시장에서 인정받고 있습니다.


BIX5는 무려 20년간의 UI 노하우를 바탕으로 순수 국내기술력으로 개발된 국내 최초, 최고의 범용 대시보드 솔루션으로서 

외국산 제품과 성능 비교에서 전혀 부족함이 없으며 모든 기능을 자체 기술력으로 개발하였기 때문에 문제가 발생했을시 신속한 대응이 가능하며 나아가 기능의 추가 및 업데이트도 상대적으로 용이한 장점을 보유하고 있습니다

BIX5는 고객 여러분이 제품을 구매하시기 전 충분히 살펴보실 수 있도록 홈페이지의 [대시보드 기능 예제] 메뉴를 통해 수백 종류의 샘플과 매뉴얼, API를 제공해드리고 있습니다. 이를 활용하면 제품을 쉽게 체험해 보실 수 있습니다. 또는 홈페이지 문의하기를 통해 요청하시거나 전화를 주시면 상담 후 평가판 제품을 발송해드립니다. 

홈페이지의 문의하기, 고객센터 이메일(bix5cs@bixsoft.net) 또는 전화(02-2655-9784)를 통해 연락주시면 상담을 통해 구매하실 수 있도록 도와드리겠습니다.

공공기관에서 구매하고자 하시는 경우 나라장터 종합쇼핑몰에서도 편리하게 구매하실 수 있습니다. 물품식별번호 23496534로 검색하시면 저희 제품을 쉽게 찾으실 수 있습니다.

라이선스에 대한 문의사항이 있으신 경우 홈페이지의 문의하기, 고객센터 이메일(bix5cs@bixsoft.net) 또는 유선전화(02-2655-9784)로 연락 부탁드립니다

  • 한(1)라이선스는 한대의 웹서버에서만 사용가능함을 의미합니다.
    (미러링서버(이중화서버)의 경우에는 2대의 서버로 간주합니다.)
  • 서버를 판단하는 기준은 IP입니다. 따라서 IP의 갯수만큼 구매하셔야 합니다.
  • 서버 내의 CPU 갯수에는 무관합니다. 

미러링(이중화 서버)의 경우에는 2대의 서버에서 사용하시는 것으로 간주하여 제품을 2 개 구매하셔야 합니다.

BIX5는 특별한 설치 과정이 필요치 않고, 단지 제품을 서버에 복사함으로써 모든 설치 과정이 완료됩니다. 제품의 필수 설치 파일인 BIX5와 LicenseKey를 제품을 설치할 디렉토리(웹서버 루트 디렉토리)로 복사하십시오.

위젯 목록을 추가하기 위해선 dashboard객체의 setWidgetPool함수에 위젯 데이터 정보가 담긴 배열을 넘겨 설정할 수 있습니다.


스크립트

<script>
    BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
	...      
         dashboard.setData(slides);
    	...
	//위젯 목록에 추가할 위젯 정보 배열
         var items = [
	// 여러개의 위젯을 폴더로 묶어 넣는 경우
            {label:"Chart Widget", children:[
            {label:"Line 2D", title:"Line_2D", type:"chart", 
            contentUrl:"./Widgets/Chart/Line_2D.html", options:{border:true}}...],         
	    // 하나의 위젯을 넣는 경우
          {label:"blank", type:"blank", options: {"border":true,"borderColor":"#a6a6a6","borderWidth":"1px"}}
      ];
    
     //dashboard의 setWidgetPool 함수에 인수로 위젯 정보가 담긴 배열을 넘기면 사이드바의 위젯리스트에 위젯들을 설정할 수 있습니다.
       dashboard.setWidgetPool(items);
   
    }, "100%","100%", {enabled:false, gridlines:false});
</script>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

위젯은 하단의 이벤트들을 지원합니다.

이벤트 핸들러명 파라미터 설명
void activeHandler() 위젯이 소속된 슬라이드가 활성화되면 호출됩니다.
boolean closeHandler()

위젯의 닫기 버튼 클릭시 호출됩니다.

true가 리턴되면 위젯이 닫힙니다.

예)

widget.closeHandler(){ ... } 

void componentReadyHandler
(componentId)

componentId : string

컴포넌트 아이디

component를 사용할 준비가 되면 호출합니다.
void componentRemoveHandler

component가 삭제되기 전 호출됩니다.
void contentReadyHandler

content를 사용할 준비가 되면 호출합니다.
void contentRemoveHandler

content가 삭제되기 전 호출됩니다.
void deactiveHandler

위젯이 소속된 슬라이드가 비활성화되면 호출됩니다.

void maximizeHandler

(type, contentWidth, contentHeight)

type : string

이벤트 종류. 유효값 : “maximize”, “normal”


contentWidth : number

content영역의 너비


contentHeight : number

content영역의 높이

위젯의 최대화 버튼 클릭시 호출됩니다.


예)

widget.maximizeHandler(type, contentWidth, contentHeight){..}

void resizeHandler
(width, height)

width : number

위젯의 너비


height : number 

위젯의 높이

위젯의 리사이징시 호출됩니다.


예)

widget.resizeHandler(width, height){ ... }

※ 이벤트 사용 시 ‘widget’은 정해진 명칭이기 때문에 변경이 불가합니다.

차트위젯 생성 방법입니다.

1. 위젯 컨텐츠로 설정하고자 하는 차트 레이아웃과 데이터를 생성합니다. ( BIX5 차트 사용자 매뉴얼 의 '2. 기본적인 차트의 생성'을 참고해주세요.) 차트 레이아웃 (Samples/Dashboard/Widgets/Chart/layout/Column_2D.xml)

<BIX5 backgroundColor="#FFFFFF" borderStyle="none">
 <Options>
  <Caption text="World Top 10 - Fastest Growing Economies (2017)" />
  <SubCaption text="GDP Growth (In %)" textAlign="center" />
 </Options>
 <Column2DChart showDataTips="true" itemClickJsFunction="@widget.chartItemClickHandler">
  <horizontalAxis>
   <CategoryAxis categoryField="Country"/>
  </horizontalAxis>
  <verticalAxis>
   <LinearAxis maximum="100" interval="10"/>
  </verticalAxis>
  <series>
   <Column2DSeries labelPosition="outside" yField="GDP" displayName="GDP Growth (In %)">
   </Column2DSeries>
  </series>
 </Column2DChart>
</BIX5>

차트 이벤트는 레이아웃 작성시 @widget.이벤트핸들러명으로 작성합니다.

<Column2DChart showDataTips="true" itemClickJsFunction="@widget.chartItemClickHandler">

차트 데이터 (Samples/Dashboard/Widgets/Chart/data/Column_2D.json)

[{"Country" : "South Sudan", "GDP" : 20},
{"Country" : "Libya", "GDP" : 30},
{"Country" : "Sierra Leone", "GDP" : 51.2},
{"Country" : "Mongolia", "GDP" : 44.5},
{"Country" : "Paraguay", "GDP" : 62.35},
{"Country" : "Timor Leste", "GDP" : 84.46},
{"Country" : "Iraq", "GDP" : 48.9},
{"Country" : "Panama", "GDP" : 38}]

2. widget 객체에 componentReadyHandler 메소드를 정의합니다. widget 은 시스템 내부에서 생성되는 객체입니다. 이벤트 핸들러 사용을 원하신다면 아래와 같이 사용하면 됩니다. 위젯 핸들러 등록 파일 (Samples/Dashboard/Widgets/Chart/Column_2D.html)

<script type="text/javascript">
widget.componentReadyHandler = function(componentId){}
</script>

3. componentReadyHandler 내부에서 차트 layout 과 차트 Data 의 URL 을 설정합니다.

<script type="text/javascript">
 widget.componentReadyHandler = function(componentId){
  document.getElementById(componentId).setLayoutURL("./Widgets/Chart/layout/Column_2D.xml");
  document.getElementById(componentId).setDataType("json");
  document.getElementById(componentId).setDataURL("./Widgets/Chart/data/Column_2D.json");

 }
</script>

4. widget 객체에 차트 레이아웃에서 설정한 이벤트 핸들러를 정의합니다.

<script type="text/javascript">
 widget.chartItemClickHandler = function(seriesId, displayText, index, data, values){ … }
</script>

5. 슬라이드 데이터에 위젯의 위치, 크기정보 및 type과 contentUrl을 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_chart.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : “slide1”,
     widgets:[{id:"Column_2D",
     x:10,
     y:10,
     width:500,
     height:290,
     title:"Column 2D",
     type:"chart",
     contentUrl:"./Widgets/Chart/Column_2D.html"}]
    }];
}, "850", "600", {enabled:false, gridlines:true});

6. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
 dashboard.setData(slides);

}, "850", "600", {enabled:false, gridlines:true});

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

1. 위젯 컨텐츠로 설정하고자 하는 그리드 레이아웃과 데이터를 생성합니다. ( BIX5 그리드 사용자 매뉴얼 의 '2. 기본적인 BIX5 Grid 생성'을 참고해주세요.) 그리드 레이아웃 (Samples/Dashboard/Widgets/Grid/layout/BasicGrid.xml)

<?xml version="1.0" encoding="utf-8"?>
<BIX5>
 <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
 <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle" textAlign="center">
  <columns>
   <DataGridColumn dataField="From" width="110" labelJsFunction="@widget.convertFrom"/>
   <DataGridColumn dataField="Subject" width="140"/>
   <DataGridColumn dataField="ReceiveDate" headerText="Date"/>
   <DataGridColumn dataField="CC"/>
   <DataGridColumn dataField="Level"/>
   <DataGridColumn dataField="Length" textAlign="right" formatter="{numfmt}"/>
   <DataGridColumn dataField="AttachCount" textAlign="right"/>
  </columns>
 </DataGrid>
</BIX5>

그리드 이벤트는 레이아웃 작성시 @widget.이벤트핸들러명으로 작성합니다.

<DataGridColumn dataField="From" width="110" labelJsFunction="@widget.convertFrom"/>

그리드 데이터 (Samples/Dashboard/Widgets/Grid/data/BasicGrid.json)

[{"From":"Amit", "Subject":"GMC-1 Release1", "ReceiveDate":"2016/09/06",
"SendDate":"2016/09/06", "CC":"Jim", "Length":451572, "Level":1, "AttachCount":0},
{"From":"Amit", "Subject":"GMC-1 Release3", "ReceiveDate":"2016/08/06",
"SendDate":"2016/08/05", "CC":"Jim", "Length":693572, "Level":3, "AttachCount":1},
{"From":"Amit", "Subject":"GMC-1 Release3", "ReceiveDate":"2016/08/06",
"SendDate":"2016/08/06", "CC":"Jim", "Length":8281, "Level":1, "AttachCount":12},
{"From":"Barb", "Subject":"GMC-1 Release3", "ReceiveDate":"2016/07/06",
"SendDate":"2016/07/06", "CC":"Anant", "Length":82371, "Level":2, "AttachCount":3},
{"From":"Barb", "Subject":"GMC-1 Release4", "ReceiveDate":"2016/08/06",
"SendDate":"2016/08/05", "CC":"Anant", "Length":9286, "Level":5, "AttachCount":6}]

2. widget 객체에 componentReadyHandler 메소드를 정의합니다. widget 은 시스템 내부에서 생성되는 객체입니다. 이벤트 핸들러 사용을 원하신다면 아래와 같이 사용하면 됩니다. 위젯 핸들러 등록 파일 (Samples/Dashboard/Widgets/Grid/BasicGrid.html)

<script type="text/javascript">
widget.componentReadyHandler = function(componentId){}
</script>

3. componentReadyHandler 내부에서 그리드 layout과 그리드 Data의 URL 을 설정합니다.

<script type="text/javascript">
 widget.componentReadyHandler = function(componentId){
  document.getElementById(componentId).setLayoutURLEx("./Widgets/Grid/layout/basicGrid.xml");
  document.getElementById(componentId).setDataType("json");
  document.getElementById(componentId).setDataURLEx("./Widgets/Grid/data/basicGrid.json");

 }
</script>

4. widget 객체에 그리드 레이아웃에서 설정한 이벤트 핸들러를 정의합니다.

<script type="text/javascript">
 widget.convertFrom = function(item, value, column){ … }
</script>

5. 슬라이드 데이터에 위젯의 위치, 크기정보 및 type과 contentUrl을 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_grid.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : "slide1",
     widgets:[{id:"BasicGrid",
     x:10,
     y:10,
     width:830,
     height:290,
     title:"Grid",
     type:"grid",
     contentUrl:"./Widgets/Grid/BasicGrid.html"}]
    }];
}, "850", "600", {enabled:false, gridlines:true});

6. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
 dashboard.setData(slides);

}, "850", "600", {enabled:false, gridlines:true});



위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

1. 위젯 컨텐츠로 설정하고자 하는 맵차트 레이아웃을 생성합니다. ( BIX5 맵차트 사용자 매뉴얼 의 '2. 기본적인 BIX5 MapChart 생성'을 참고해주세요.) 맵차트 레이아웃 (Samples/Dashboard/MapChart/layout/worldCountry.xml)

<?xml version="1.0" encoding="utf-8"?>
<BIX5>
 <MapChart id="mainMap1" showDataTips="true" dataTipType="Type3">
  <series>
   <MapSeries id="mapseries" interactive="true" selectionMarking="line" color="#555555" labelPosition="none" displayName="Map" rollOverFill="transparent"transparentValue="0" selectionStrokeWeight="1" selectionStrokeSize="small" localFillJsFunction="@widget.colorFunction">
    <stroke>
      <Stroke color="#FFFFFF" weight="0.5" alpha="1"/>
     </stroke>
     <rollOverStroke>
      <Stroke color="#FFFFFF" weight="0.5" alpha="1"/>
     </rollOverStroke>
    </MapSeries>
   </series>
 </MapChart>
</BIX5>

맵차트 이벤트는 레이아웃 작성시 @widget.이벤트핸들러명으로 작성합니다.

<MapSeries id="mapseries" localFillJsFunction="@widget.colorFunction">

2. widget 객체에 componentReadyHandler 메소드를 정의합니다. widget 은 시스템 내부에서 생성되는 객체입니다. 이벤트 핸들러 사용을 원하신다면 아래와 같이 사용하면 됩니다. 위젯 핸들러 등록 파일 (Samples/Dashboard/Widgets/MapChart/worldCountry.html)

<script type="text/javascript">
widget.componentReadyHandler = function(componentId){}
</script>

3. componentReadyHandler 내부에서 맵차트 layout과 맵차트 Data의 URL 을 설정합니다.

<script type="text/javascript">
 widget.componentReadyHandler = function(componentId){
  var mapDataBaseURL = "../MapChart/MapDataBaseXml/WorldCountry.xml";
  var sourceURL = "../MapChart/MapSource/WorldCountry.svg";
  var layoutURL = "./Widgets/MapChart/layout/worldCountry.xml";

  document.getElementById(componentId).setLayoutURLEx(layoutURL);
  document.getElementById(componentId).setMapDataBaseURLEx(mapDataBaseURL);
  document.getElementById(componentId).setSourceURLEx(sourceURL);

 }
</script>

4. widget 객체에 맵차트 레이아웃에서 설정한 이벤트 핸들러를 정의합니다.

<script type="text/javascript">
 widget.colorFunction = function(code, label, data){ … }
</script>

5. 슬라이드 데이터에 위젯의 위치, 크기정보 및 type과 contentUrl을 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_mapchart.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : "slide1",
     widgets:[{id:"WorldCountry",
     x:10,
     y:10,
     width:830,
     height:290,
     title:"World Country",
     type:"mapchart",
     contentUrl:"./Widgets/MapChart/WorldCountry.html"}]
    }];
}, "850", "600", {enabled:false, gridlines:true});

6. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
 dashboard.setData(slides);

}, "850", "600", {enabled:false, gridlines:true});


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

1. 슬라이드 데이터에 위젯의 위치, 크기정보 및 type과 contentUrl을 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_iframe.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : "slide1",
     widgets:[{id:"iframe",
     x:10,
     y:10,
     width:710,
     height:580,
     title:"iframe",
     type:"iframe",
     contentsOptions:{url:"http://www.bixsoft.net"}}]
    }];
}, "850", "600", {enabled:true, gridlines:true});

2. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
dashboard.setData(slides);
}, "850", "600", {enabled:true, gridlines:true});


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

1. 슬라이드 데이터에 위젯의 위치, 크기정보 및 비디오 정보를 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_video.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : "slide1",
     widgets:[{id:"video",
     x:10,
     y:10,
     width:640,
     height:360,
     title:"Video",
     type:"video",
     contentsOptions:{autoplay:true, controls:true, loop:true, muted:true
      , sources:[{src:"./Web/Videos/Blue.mp4", type:"video/mp4"}]}
,
     contentUrl:"./Widgets/Html/helloWorld.html"}]
    }];
}, "850", "600", {enabled:true, gridlines:true});

2. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
dashboard.setData(slides);
}, "850", "600", {enabled:true, gridlines:true});


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

1. Youtube IFrame API를 사용을 위해 <head>에 다음 스크립트를 넣어줍니다.

<script src="https://www.youtube.com/iframe_api"></script>

2. 슬라이드 데이터에 위젯의 위치, 크기정보 및 비디오 정보를 설정합니다. 대시보드 설정 (Samples/Dashboard/Widgets/getting_started_widget_youtube.html)

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{slideName : "slide1",
     widgets:[{id:"youtube",
     x:10,
     y:10,
     width:640,
     height:360,
     title:"Youtube",
     type:"youtube",
     contentsOptions:{videoId:"이곳에 재생할 비디오 아이디를 설정해주세요", playerVars:{autoplay:1}}
    }];
}, "850", "600", {enabled:true, gridlines:true});

파라미터, 이벤트 등 자세한 사항은 Youtube IFrame Player API 참조문서를 참고 바랍니다. 3. 슬라이드 높이, 너비를 설정하고 대시보드에 슬라이드를 설정합니다.

BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
 var slides = [{…}];

 dashboard.setSlideWidth(850);
 dashboard.setSlideHeight(600);
 dashboard.setData(slides);

}, "850", "600", {enabled:true, gridlines:true});


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

BIX5 대시보드는 위젯 간 연동을 위하여 이벤트를 주고받는 방식을 사용하고 있습니다.


먼저 BIX5.dashboard.createEvent로 이벤트를 생성하여 슬라이드에 해당 이벤트를 송출합니다.

<!-- 이벤트 발송 위젯모듈-->
<script>
    widget.componentReadyHandler = function(componentId){
        var event = BIX5.dashboard.createEvent("targetReady");
        event.detail = {targetId : componentId}; // event 객체를 통해 파라미터를 넘길
        widget.getSlide().dispatchEvent(event);
    }
</script>


그리고 이벤트를 받을 위젯에서 해당 위젯의 메소드를 이벤트 리스너로 등록하는 방식으로 위젯간 연동을 지원하고 있습니다. 

<!-- 이벤트 수신 위젯모듈 -->
<script>
    widget.componentReadyHandler = function(componentId){
        widget.getSlide().addEventListener("targetReady", widget.targetReadyFunc);
    }
    
    widget.targetReadyFunc = function(event){
        console.log(event.detail.targetId);
    }

    widget.componentRemoveHandler = function(){
        widget.getSlide().removeEventListener("targetReady", widget.targetReadyFunc);
    } </script>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

저희 제품에서 지원하는 위젯 외에도 html 삽입이나 iframe을 통해 외부 컨텐츠를 위젯에 넣는 것을 가능하도록 지원하고 있습니다.  다음은 외부 API를 이용한 예시입니다.


스크립트

<script>
    BIX5.dashboard.create("dashboard1", "dashboardHolder", function(dashboard){
        var slides = [{slideName: "slide1", 
                        widgets:[{x:10, y:10, width:500, height:300, type:"html", contentUrl:"./Widgets/Html/map.html"}]}];
         dashboard.setData(slides);
         ...
    }, "100%", "100%", {enabled:false, gridlines:false});
</script>

map.html

<script>
    widget.componentReadyHandler = function(componentId){
	widget.componentId = componentId;
        var container = document.getElementById(componentId);
	widget.mapCenter = new daum.maps.LatLng(37.5667, 126.9784);
		
	var options = { //지도를 생성할 때 필요한 기본 옵션
		center: widget.mapCenter, //지도의 중심좌표.
		level: 5 //지도의 레벨(확대, 축소 정도)
	};

	widget.map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴
		
        setTimeout(function(){
        	widget.map.relayout();
                // 카카오지도는 지도 영역이 바뀔 경우에 지도의 중심이 유지되지 않으므로
                // map.relayout() 함수와 map.setCenter()로 
                // 지도의 영역 및 중심을 다시 지정해 주어야 합니다.
		widget.map.setCenter(widget.mapCenter);	
        }, 1000);
    }
</script>


이외에도 다양한 컨텐츠를 위젯에 삽입하여 다채롭고 다양한 대시보드를 구성할 수 있습니다. 

차트에 데이터를 동적으로 적용하려면 2가지 방식이 있습니다.


1. 데이터 변경 시 차트의 setData함수를 이용하여 차트에 데이터를 설정


document.getElementById(id).setData([...]);


2. RealTime차트를 사용하는 방법.


예시)


<BIX5 backgroundColor="#FFFFFF" borderStyle="none">
    <Options>
		...
    </Options>
    <DateFormatter id="dateFmt" formatString="HH:NN:SS"/>
    <RealTimeChart id="chart">
       ...
    </RealTimeChart>
	// url : RPC 요청를 위한 URL 을 설정합니다.
	// target : RPC 수행에 의해서 서버로부터 받은 데이터를 전달할 객체를 설정합니다.
	// interval : RPC 요청 후 최대 대기 시간을 설정합니다.
	// method : 요청방식
    <HttpServiceRepeater url="요청 URL" target="{chart}" interval="3" method="get"/>
</BIX5>

RealTime 예제는 다음에서 확인해보세요.


지금 샘플 보기

Y축의 위치를 왼쪽에서 오른쪽으로 변경하는 방법은 다음과 같이 AxisRenderer의 placement 속성을 사용하시면 됩니다.


예시)


<BIX5>

    <Column2DChart>

        <verticalAxis>

            <LinearAxis id="vAxis"/>

        </verticalAxis>

        // vericalAxisRenderers : 세로축의 렌더러를 설정합니다.

        <verticalAxisRenderers>

        <Axis2DRenderer axis="{vAxis}" placement="right"/>

        </verticalAxisRenderers>

        <series>

            ...

        </series>

    </Column2DChart>

</BIX5>


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

레이아웃의 Column2DSeries에 fillsJsFunction 속성에 자바스크립트 함수명을 작성하고 자바스크립트의 해당 함수 내에서 원하는 조건에 따라 색상을 다르게 return하면 됩니다.


<Column2DSeries yField="Profit" fillJsFunction="fillJsFunc"/>

// 파라메터 설명 // seriesId : MapSeries의 id // code : 지역 코드 (mapDataBaseURL의 파일 참조) // label : 지역명. // data : 해당 지역코드로 dataURL을 통해 전달된 데이타 function fillJsFunc(seriesId, index, data, values){ if(values[1] > 2000) return {"color":"#CC3300", "alpha":0.7}; else if(values[1] > 1000) return "#FF9900"; else return {"color":"#996600", "alpha":0.5}; }

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

NumberFormatter에 precision 속성을 1로 설정 후 적용을 원하는 곳에 formatter를 설정해주시면 됩니다. formatter 속성 지원 여부는 API를 통해 알 수 있습니다.

하단의 예시를 참고 바랍니다.

예시) 

<BIX5>
    <!-- NumberFormatter 인스턴스를 미리 생성 -->
    <NumberFormatter id="numfmt" precision="1"/>
    ...
    <!-- 데이터 팁에 formatter 적용 -->
    <Column2DChart dataTipFormatter="{numfmt}">
        <series>
            <!-- 시리즈에 formatter 적용 -->
            <Column2DSeries formatter="{numfmt}"/>
        </series>
    </Column2DChart>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

축라벨에 %를 붙이고 싶은 경우 CurrencyFormatter의 currentSymbol속성을 “%”, alignSymbol은 right로 적용한 후 해당 Formatter를 Chart의 dataTipFormatter에 지정해주시면 됩니다. 


예시)

<BIX5>
    <CurrencyFormatter id="fmt" currencySymbol="%" alignSymbol="right"/>
       ...
    <verticalAxis>
        <LinearAxis id="vAxis" formatter="{fmt}"/>
    </verticalAxis>
</BIX5>


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

제목의 폰트사이즈를 변경하려면 Caption의 fontSize속성에 number 타입으로 설정하면 됩니다. 단위는 px입니다.


예시)

<BIX5>
    <Options>
        <Caption text="Annual Report" fontSize="15"/>
    </Options>
</BIX5>

Pie2DSeries의 labelPosition속성에 “insideWidthCallout”으로 설정하면 기본적으로 안쪽에 수치를 표시하고 크기가 작아 공간이 없으면 해당 조각에 선을 그어 수치를 표시합니다.


예시)

<BIX5>
    ...
    <Pie2DChart>
        <series>
            <Pie2DSeries labelPosition="insideWithCallout"/>
        </series>
    </Pie2DChart>
</BIX5>


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

범례의 위치를 변경려면 Legend의 Position, hAlign, vAlign속성을 통해 범례의 위치를 변경할 수 있습니다. 자세한 사항은 샘플과 API에서 확인하실 수 있습니다.


예시)

<BIX5>
    <Options>
        <Legend position="right" vAlign="middle">
    <Options>
    ...
</BIX5>

position : 차트를 기준으로 범례가 위치할 곳을 정합니다. 유효값 ) bottom, left, right, top
hAlign : position에 의해 정해진 범례의 위치에서 구체적으로 수평방향으로 정렬합니다. 유효값)  center, left, right
vAlign : position에 의해 정해진 범례의 위치에서 구체적으로 수직방향으로 정렬합니다. 유효값)  middle, top, bottom 


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

그리드에서 페이징을 구현할 수 있는 방식은 두가지가 있습니다.


1. 페이지를 누를 때 마다 setDataURLEx 함수를 이용하여 데이터를 가져오는 방식


지금 샘플 보기


2. PagingCollection을 이용하여 전체 데이터를 한꺼번에 가져와 페이지를 구현하는 방식

<BIX5>
    <DataGrid id="dg1" verticalAlign="middle" sortableColumns="true" textAlign="center">
        <columns>
           ...
        </columns>
        <dataProvider>
	<!-- rowsPerPage: 1페이지에서 보여줄 레코드 수.(기본값 20) -->
            <PagingCollection rowsPerPage="25" source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

지금 샘플 보기

숫자에 천단위 콤마표시를 하려면 NumberFormatter의 useThousandsSeparator를 이용하 천단위 콤마를 표시하려는 곳에 formatter를 적용하면 표시할 수 있습니다.


예시)


<BIX5>
<!-- useThousandsSeparator true이면 천단위 구분 기호를 사용 (true,false중 택일, 기본 true) -->
    <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
    <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle">
        <columns>
	<!-- 적용하려는 컬럼에 formatter적용-->
            <DataGridColumn dataField="Seoul" textAlign="right" formatter="{numfmt}"/>
        </columns>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기


그리드는 Javascript를 이용한 편집, 직접 편집, 팝업편집, 다중라인 편집 등 다양한 입력방식을 제공하고 있습니다.

그 중 셀에 직접 편집하는 것은 DataGrid의 editable 속성을 통해 지정가능하고 각 컬럼별로 편집 여부를 제어할 수 있습니다. 

편집모드는 더블클릭(설정을 통해 클릭으로도 가능) 혹은 F2 키로 , enter키로 다음행, tab키로 다음셀, shift 키와 함께 이전행, 이전셀로 이동하게 됩니다. 컬럼에 editable 속성을 false로 주면 해당 컬럼은 편집이 되지 않습니다.


예제)


<BIX5>
    <!-- 편집 모드를 사용하기 위해 editable 속성을 true로 지정 -->
    <DataGrid editable="true" doubleClickEnabled="true">
        <columns>
	    <!-- 해당 컬럼이 편집되지 않도록 editable 속성을 false  -->
            <DataGridColumn dataField="Region" editable="false" backgroundColor="#EFEFEF"/>
            <DataGridColumn dataField="Territory" width="150"/>
        </columns>
    </DataGrid>
</BIX5>

※ 여러 셀이 동시에 편집모드가 되는 것은 HTML 특성 상 불가능 합니다.


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기




특정 row만 수정 불가하게 하려면 DataGriditemEditBeginningJsFunction을 이용하시면 조건에 따라 편집가능 여부를 제어할 수 있습니다


레이아웃

<BIX5>
    <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true" itemEditBeginningJsFunction="itemEditBeginningFunction">
        <columns>
            ...
            <DataGridColumn dataField="CC"/>
            ...
        </columns>
    </DataGrid>
</BIX5>
스크립트
// itemEditBeginningJsFunction 기능을 이용하여 에티팅시 편집 가능여부를 제어할 수 있습니다.
// 	rowIndex: 해당 행의 index번호
// 	columnIndex: 해당 열의 index번호
//	item: 해당 행의 data 객체
//	dataField: 필드명
// false를 반환할 경우 에디팅 불가이며, true를 반환할 경우 에디팅이 가능합니다.
function itemEditBeginningFunction(rowIndex, columnIndex, item, dataField) {
	if (columnIndex <= 1)
		return false;
	if (item.CC == "Jim")
		return false;
	return true;
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

셀에 콤보박스 추가는 ItemEditor의 ComboBoxEditor 또는 itemRenderer의 ComboBoxItemRenderer를 통하여 추가할 수 있습니다. ComboBoxEditor는 편집모드 진입시 콤보박스가 보이고 ComboBoxItemRenderer는 편집모드 진입 없이 콤보박스가 보인다는 차이가 있습니다.


ComboBoxEditor


<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true">
        <columns>
          ...
            <DataGridColumn dataField="Subject" width="150" fontWeight="bold" itemEditor="ComboBoxEditor" 
                            editorDataField="selectedDataField" itemRendererDataField="code" 
                            itemRenderer="DataProviderItem" 
                            itemRendererDataProvider="[{'label':'GMC-1 R1','code':'GMC-1 Release1'},
                                                        {'label':'GMC-1 R2','code':'GMC-1 Release2'}, 
                                                        {'label':'GMC-1 R3','code':'GMC-1 Release3'}]"/>
	...
        </columns>
    </DataGrid>
</BIX5>

지금 샘플 보기



ComboBoxItemRenderer


<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="false">
        <columns>
            ...
            <DataGridColumn dataField="Subject" itemRenderer="ComboBoxItem" rendererIsEditor="true" 
                 itemRendererDataProvider="[{'label':'GMC-1 Release1'},{'label':'GMC-1 Release2'},{'label':'GMC-1 Release3'}]"/>
            <DataGridColumn dataField="ReceiveDate" headerRenderer="ComboBoxHeader" 
                 headerRendererDataProvider="[{'label':'2013년'},{'label':'2014년'}]"/>
            ...
        </columns>
    </DataGrid>
</BIX5>


지금 샘플 보기


그리드 내에서 체크박스 선택 여부 값을 얻을 때 true/false가 아닌 다른 값을 받으려면 체크박스 아이템 렌더러를 사용하는 DataGridColumn에 trueValue, falseValue 속성을 사용하여 값을 지정할 수 있습니다.


레이아웃

<BIX5>
    <!--
    doubleClickEnabled은 반드시 false로 설정되어야 합니다.
    itemRenderer속성에 체크박스 렌더러를 설정합니다.
    rendererIsEditor속성을 true로 설정합니다.
    -->
    <DataGrid id="dg1" editable="true" doubleClickEnabled="false">
        <columns>
           <DataGridColumn dataField="Selected" headerText="" itemRenderer="CheckBoxItem" rendererIsEditor="true"
editorDataField="selected" width="40" textAlign="center" backgroundColor="#EDEDF0"             trueValue="Y" falseValue="N"/> </columns> </DataGrid> </BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

BIX5 그리드는 sparkLine, sparkColumn, sparkWinLoss의 총 3가지 종류의 스파크 차트를 지원하고 있습니다. DataGridSparkColumn에 itemRenderer 속성에 따라 결정되며 유효값은 SparkColumn, SparkLine, SparkWinLoss입니다. 


예시

<BIX5>
    <DataGrid>
        <columns>
        ...
            <DataGridSparkColumn dataFields="Y2004,Y2005,Y2006" headerText="Spark Line" … itemRenderer=”sparkColumn” />
        ...
        </columns>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

그리드의 컬럼 지정 기능을 이용하여 엑셀 export 시 보여지는 컬럼을 지정할 수 있습니다.

dataGrid.exportColumns = [0,1,2,3,4,5,9,10]와 같은 방법으로 사용하시면 됩니다.

컬럼 지정에 의해 export되는 컬럼은 visible이 false여도 숨기기로 처리되지 않습니다.


스크립트

function gridReadyHandler(id) {
	// BIX5Grid 관련 객체
	gridApp = document.getElementById(id);	// 그리드를 포함하는 div 객체
	gridRoot = gridApp.getRoot();	// 데이터와 그리드를 포함하는 객체

	gridApp.setLayout(layoutStr);
	gridApp.setData(gridData);

	var layoutCompleteHandler = function(event) {
		dataGrid = gridRoot.getDataGrid();	// 그리드 객체
	}

	gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

var gridApp, gridRoot, dataGrid;

// 엑셀 export
function excelExport() {
	// export할 컬럼을 지정합니다. - 컬럼의 번호를 배열로 지정
	dataGrid.exportColumns = [0,1,2,3,4,5,9,10];

	// excel 파일 종류 지정
	for (var i = 0; i < inputForm.export_type.length; i++) {
		if (inputForm.export_type[i].checked) {
			dataGrid.exportType = inputForm.export_type[i].value;
			break;
		}
	}
	dataGrid.exportFileName = "export." + dataGrid.exportType;

	// 엑셀 exportSave
	// excelExportSave(url:String, async:Boolean);
	//    url : 업로드할 서버의 url, 기본값 null
	//    async : 비동기 모드로 수행여부, 기본값 false
	gridRoot.excelExportSave("http://demo.bix5.net/SDK/Samples/Grid/ServerSamples/saveExcel.jsp", false);
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

그리드에서 붙여넣기할 때 넣어지는 값에 대해 변형을 하고자 할 경우에는 pasteParseJsFunction 기능을 이용하여 값을 조정하실 수 있습니다. 


레이아웃

<BIX5>
    <DataGrid id="dg1" editable="true" doubleClickEnabled="true" pasteEnabled="true" 
                pasteParseJsFunction="pasteParseFunction">
        <columns>
            <DataGridColumn dataField="Region"/>
            <DataGridColumn dataField="Territory" width="150"/>
            <DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" width="150"/>
            <DataGridColumn dataField="Actual" textAlign="right"/>
            <DataGridColumn dataField="Estimate" textAlign="right"/>
            <DataGridColumn dataField="Real" textAlign="right"/>
            <DataGridColumn dataField="Price" textAlign="right"/>
        </columns>
    </DataGrid>
</BIX5>
스크립트


// pasteParseJsFunction 기능을 이용하여 붙여넣기하는 셀의 값을 받아 편집하실 수 있습니다.
// parsedValue: 붙여넣기할 필드의 값
// parsedObj: 붙여넣기할 행 data 객체
// item: 붙여넣기 할 행의 원본 data 객체
// column: 붙여넣기할 컬럼
// 반환되는 값으로 해당 필드의 값이 적용됩니다.

function pasteParseFunction(parsedValue, parsedObj, item, column) {
    //여기서 붙여지는 텍스트에 대한 변형을 함
	if (column.getDataField() == "Territory")
		return parsedValue + "-1";
	else
		return parsedValue;
}

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

계층형 데이터인 경우 BIX5그리드에서는 폴더 형식으로 표현이 가능합니다. XML 데이터 또는 JSON데이터로 표현 가능하고, XML데이터는 dataProvider는 HierarchicalData, JSON 데이터는 SpanHierarchicalData를 사용합니다. 


XML 계층형 데이터 레이아웃 예시


<BIX5>
    <DataGrid id="dg1" displayItemsExpanded="false">
        <columns> 
            <!--    XML의 attribute로 있는 자료를 필드에 넣을 경우에는 attribute명 앞에 @를 붙여서 넣어줍니다 -->
            <DataGridColumn id="dg1col1" dataField="@Year" textAlign="center" headerText="Year"/>
	    ...
        </columns>
        <dataProvider>
    <!-- 그리드의 자료를 일반 dataProvider가 아닌 별도의 컴포넌트에 입력해야 할 경우 아래와 같이 source에 $gridData를 넣어줍니다 -->
            <HierarchicalData source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기


JSON 계층형 데이터 레이아웃 예시

<BIX5>
    <DataGrid id="dg1" displayItemsExpanded="false">
        <columns> 
            <DataGridColumn id="dg1col1" dataField="Year" textAlign="center" headerText="Year"/>
	    ...
        </columns>
        <dataProvider>
    <!-- 그리드의 자료를 일반 dataProvider가 아닌 별도의 컴포넌트에 입력해야 할 경우 아래와 같이 source에 $gridData를 넣어줍니다 -->
            <SpanHierarchicalData source="{$gridData}"/>
        </dataProvider>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.

지금 샘플 보기

많은 양의 데이터를 그리드에 출력하는 경우 CSV를 사용하면 필드명이 없으므로 가장 빠르게 파싱이 가능해집니다. 또한 스크롤 속도가 문제가 되는 경우 DataGrid의 liveScrolling 속성을 false로 주시면 마우스 조작이 완료된 후 스크롤 위치가 이동하도록 설정하여 이를 해결하실 수 있습니다.


스크립트 ( 데이터타입을 fastCsv로 사용한 예시 )

fastCsv : CSV 형식으로 파싱하며, 필드 데이터에 '"',',',' ' 가 포함되지 않아 레코드 구분은 ' ', 필드 구분은 ','로만 분리가 가능할 경우 사용합니다.


// ----------------------- 그리드 설정 시작 -------------------------------------

// BIX5에서 그리드 생성 준비가 완료될 경우 호출할 함수를 지정합니다.
var jsVars = "BIX5OnLoadCallFunction=gridReadyHandler";

jsVars += "&dataType=fastCsv";

BIX5.grid.create("grid1", "gridHolder", jsVars, "100%", "100%");

function gridReadyHandler(id) {
	// BIX5Grid 관련 객체
	gridApp = document.getElementById(id);	// 그리드를 포함하는 div 객체
	gridRoot = gridApp.getRoot();	// 데이터와 그리드를 포함하는 객체

	gridApp.setLayout(layoutStr);
	gridApp.setDataURLEx(gridDataURL);
}

var gridApp, gridRoot;

레이아웃 (liveScrolling 미적용하여 마우스 조작이 완료된 후 스크롤 위치가 이동하도록 설정


<BIX5>
<!-- showScrollTips 마우스의 thumb 움직임에 따라 툴팁을 보여줄지 여부 (true,false중 택일, 기본 true) -->
    <DataGrid id="dg1" showScrollTips="true" selectionMode="singleRow" liveScrolling="false">
        <columns>
            <DataGridColumn dataField="F0" headerText="종목코드" width="150"/>
            <DataGridColumn dataField="F1" headerText="SEQ" width="50"/>
	...
        </columns>
    </DataGrid>
</BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

샘플에서 제공되는 지도 외의 지도를 사용하시길 원하신다면 라이센스 정책에 의거하여 정품 구입시 사용자가 일러스트를 이용해 지도를 직접 수정하셔서 사용하는 것이 가능합니다.

BIX5에서 지원하는 루트시리즈는 특정 지역과 지역을 이어주는 선을 올려놓을 수 있는 시리즈로 지도에 지역과 지역 관계선을 시각적으로 표현할 때 쓸 수 있는 시리즈입니다. 해당 시리즈를 이용하여 지도 위에 경로를 표현할 수 있습니다.


※ 하위 맵 이동 (drillDown) 시에 하위 맵과 상위 맵을 이어주는 route 는 지원되지 않습니다.


레이아웃


<?xml version="1.0" encoding="utf-8"?>
    <BIX5>
        <MapChart id="mainMap">
            <series>
                <MapSeries id="mapseries" selectionMarking="line" displayName="Map Series" interactive="false">
                    <localFill>
                        <SolidColor color="#e9f3f4"/>
                    </localFill>
                    <stroke>
                        <Stroke color="#CAD7E0" weight="0.5" alpha="1"/>
                    </stroke>
                </MapSeries>
                <MapRouteSeries id="route1" fromCodeField="fc" toCodeField="code" weight="1.5" labelField="flightRoute" 
                 fromHCenterGapField="fh" fromVCenterGapField="fv" toHCenterGapField="th" labelHCenterGapField="lh" 
                 labelVCenterGapField="lv" fill="#487A95" toVCenterGapField="tv" lineColor="#487A95" fontWeight="bold" 
                 displayName="공항" dashed="true" showLabel="false" curveField="curve" imageUrlField="imgurl" 
                 rotateField="rotate" marker="middle" imagePosition="from" imgMovingSpeed="2">
                    <showDataEffect>
                        <SeriesZoom duration="1000"/>
                    </showDataEffect>
                </MapRouteSeries>
            </series>
        </MapChart>
    </BIX5>

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

버블의 위치가 겹쳐져서 다른 부분을 덮는 경우 버블의 위치를 옮기는 방법을 사용할 수 있습니다. 샘플 중 맵차트 Series - Bubble Series를 보시면 아래와 같이 horizontalCenterGapField와 verticalCenterGapField 속성을 확인하실 수 있습니다.


레이아웃 예시 

<BIX5>
    <MapSeries/>
    <MapBubbleSeries ... horizontalCenterGapField="h" verticalCenterGapField="v">
</BIX5>

수평이동에 대한 데이터필드를 지정하는 속성으로 불러오는 데이터에서 h 값을 가져와서 수평 이동 값으로 적용합니다.

수직이동은 verticalCenterGapField 로 설정할 수 있습니다.


위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

rootCode를 맵차트의 속성으로 넣어주시면 해당코드의 맵부터 시작되며 상위맵으로 이동하지 않습니다. 


레이아웃 예시

<BIX5>
	<MapChart id="mainMap1" showDataTips="true" rootCode="300">
	...
	</MapChart>
</BIX5>
다음과 같이 맵차트의 속성으로 넣어주시면 코드 300번의 지역으로 초기 호출되며 상위맵으로 이동하는 기능도 사용할 수 없게됩니다. 

또는 스크립트로 제어할 수도 있습니다. 
var mapApp = document.getElementById(맵차트아이디);
var mapRoot = mapApp.getRoot();

mapRoot.setRootCode(rootCode); // rootCode : 루트로 지정할 코드

위 예제는 데모 사이트에서 확인하실 수 있습니다.


지금 샘플 보기

고객 여러분의 문의사항에 대하여 성심껏 답해 드리겠습니다.

문의접수 시간으로부터 24시간 내에 답변을 드립니다.