rMateChart v7.0

new rMateChartH5()

rMateChartH5 클래스는 사용자 자바스크립트 함수를 통해서 알메이트 차트에 접근 가능하도록 하는 클래스입니다.

사용자는 알메이트 차트(rMateChartH5) 객체가 제공하는 변수에 접근이 가능하고, 함수를 호출할 수 있습니다.

Members

dataEditorUrlString

데이터 에디터 생성을 위해 필요한 자바스크립트 파일의 경로를 설정합니다.

사용 예는 다음과 같습니다.

chartVars = "useDataEditor=true";
rMateChartH5.dataEditorUrl = "../rMateChartH5/JS/editablegrid-2.0.1.js";
rMateChartH5.create(...);

Default Value:

/rMateChartH5/JS/

patternImageBaseUrlString

패턴 이미지 파일이 존재하는 경로를 설정합니다.

사용 예는 다음과 같습니다.

chartVars = "usePattern=true";
rMateChartH5.patternImagesBaseUrl = "../rMateChartH5/Assets/Patterns/"
rMateChartH5.create(...);

Default Value:

/rMateChartH5/Assets/Patterns/

patternImagesUrlString

각 패턴 이미지 파일을 patternImagesUrl 속성에 설정합니다.

사용 예는 다음과 같습니다.

chartVars = "usePattern=true";
rMateChartH5.patternImagesBaseUrl = "../rMateChartH5/Assets/Patterns/"
rMateChartH5.patternImagesUrl = [
  "diagonal_ltr.png",
  "diagonal_rtl.png",
  "diagonal.png",
  ....
];
rMateChartH5.create(...);

Default Value:

null

useDataEditorString

차트와 함께 데이터 에디터에 대한 사용이 필요한 경우 설정합니다.

rMateChartH5.create() 함수의 세번째 인자인 chartVars 변수에 설정됩니다.

useDataEditor 속성이 설정되면 데이터 에디터 생성을 위해 필요한 자바스크립트가 실행됩니다.

사용 예는 다음과 같습니다.

chartVars = "useDataEditor=true";
...
rMateChartH5.create(chartId, chartHolderId, chartVars);

Default Value:

false

usePatternString

시각 장애인을 위한 패턴 이미지를 차트에 적용할 지 여부를 설정합니다.

rMateChartH5.create() 함수의 세번째 인자인 chartVars 변수에 설정됩니다.

usePattern 속성이 설정되면 해당 패턴 이미지가 적용됩니다.

사용 예는 다음과 같습니다.

chartVars = "usePatter=true";
rMateChartH5.create(chartId, chartHolderId, chartVars);

Default Value:

null

Methods

accessibilityPattern(value)

차트에 패턴 이미지 적용을 설정/해제 합니다.

document.getElementById(chartId).accessibilityPattern(value);

Name	Type	Description
`value`	Boolean	유효값은 true, false 입니다.

changeScrollBarSize(size)

스크롤 차트에서 스크롤바의 크기를 설정합니다.

var size = {
  arrowSize : 10,     // 상, 하, 좌, 우 버튼의 크기
  scrollHeight : 10,  // 스크롤 높이
  thumbHeight : 10,   // 썸(thumb)의 높이
  thumbMinSize : 10   // 썸(thumb)의 최소 크기
};

document.getElementById(chartId).changeScrollBarSize(size);

Name	Type	Description
`size`	Object	스크롤바의 크기

clear(chartId)

rMateChartH5.create() 로 생성하였던 차트의 Root를 제외한 나머지를 모두 삭제합니다

document.getElementById(chartId).clear();

Name	Type	Description
`chartId`	String	차트 식별자 (Identifier)

clearSelection()

selectionMode로 강조된 아이템들을 해제합니다.

document.getElementById(chartId).clearSelection();

create(chartId, chartHolderId, chartVars, hSize, vSize, onLoadCallFunction)

차트를 생성합니다.

rMateChartH5.create() 함수가 호출되면 차트가 즉시 생성되는 것은 아닙니다.

차트 생성을 위해서 필요한 모든 DOM 요소가 존재하는 지 먼저 검사를 한 후, DOM 요소가 완전히 만들어졌다고 판단되었을 때 차트 생성을 진행하게 됩니다.

1. rMateChartH5.create() 실행
2. HTML DOM 요소가 존재하는 지 확인
3. chartVars, layotURL, dataURL 이 존재할 경우 차트의 레이아웃과 데이터를 설정
4. 차트 출력

만약 2번 단계에서 DOM 요소가 만들어지지 않았다면, DOM 요소의 생성이 완료되기를 기다린 후 생성이 완료되면 3번 단계로 진행하게 됩니다.

Name	Type	Description
`chartId`	String	차트 식별자 (Identifier)
`chartHolderId`	String	차트의 부모 <div> 식별자 (Identifier)
`chartVars`	String	차트 설정값
`hSize`	String	차트 가로 크기 (기본값 : 100%)
`vSize`	String	차트 세로 크기 (기본값 : 100%)
`onLoadCallFunction`	function	DOM 요소 검사 후 실행될 함수명

destroy(chartId)

rMateChartH5.create() 로 생성하였던 차트의 Root 까지 모두 삭제합니다.

document.getElementById(chartId).destory();

Name	Type	Description
`chartId`	String	차트 식별자 (Identifier)

getChartData()

차트가 출력하고 있는 데이터를 반환합니다.

document.getElementById(chartId).getChartData();

getCSVData()

차트가 출력하고 있는 데이터를 CSV 형태로 반환합니다.

document.getElementById(chartId).getCSVData();

getDrillDownDepth()

현재 차트가 출력하고 있는 드릴다운 데이터의 depth 를 반환합니다.

document.getElementById(chartId).getDrillDownDepth();

getSelectedChartItem()

selectionMode 속성값이 single 혹은 multiple 일 경우 선택되어져 있는 item 을 반환합니다.

document.getElementById(chartId).getSelectedChartItem();

getSnapshot()

출력된 차트의 스냅샷 이미지에 대한 base64 인코딩 값을 생성합니다.

차트 이미지 데이터를 서버로 전송할 수 있습니다.

var base64 = document.getElementById(chartId).getSnapshot();

hasNoData()

차트에 데이터가 존재하지 않음을 표시하는 창을 실행합니다.

document.getElementById(chartId).hasNoData();

hideDataEditor()

데이터 에디터를 숨기도록 설정합니다.

document.getElementById(chartId).showDataEditor();

legendAllCheck(value)

범례의 전체 항목에 대한 visible 속성을 제어합니다.

document.getElementById(chartId).legendAllCheck(value);

Name	Type	Description
`value`	Boolean	유효값은 true, false 입니다.

legendCheck(index, value)

범례의 특정 항목에 대한 visible 속성을 제어합니다.

document.getElementById(chartId).legendCheck(index, value);

Name	Type	Description
`index`	Number	변경하려는 범례 항목의 인덱스
`value`	Boolean	유효값은 true, false 입니다.

registerTheme(theme)

차트에 설정하려는 테마(theme) 데이터를 알메이트 차트(rMateChartH5)에 등록합니다.

HTML 문서에 테마(theme)을 설정하는 자바스크립트 파일(theme.js)이 include 되어있어야 합니다.

rMateChartH5.registerTheme(theme);

Name	Type	Description
`theme`	Object	설정할 테마(theme) 데이터 객체

removeAdditionalPreloader()

프리로더를 제거합니다.

사용자가 차트 내에 프리로더를 실행/제거 할 수 있습니다.

document.getElementById(chartId).removeAdditionalPreloader();

removeTheme(theme)

차트(rMateChartH5)에 설정(등록)되어 있는 테마(theme)을 삭제합니다.

테마(theme) 삭제 시 해당 테마(theme)가 적용된 차트들에는 차트의 기본(default) 테마(theme)가 재적용됩니다.

rMateChartH5.removeTheme(theme);

Name	Type	Description
`theme`	Object	삭제할 테마(theme) 데이터 객체

resize()

차트의 크기를 변경합니다.

최초에 설정된 차트의 부모 <div> 의 크기를 변경한 후, 함수를 실행하여 차트의 크기를 변경합니다.

chartHolder.style.width = "500px";
chartHolder.style.height = "500px";
document.getElementById(chartId).resize();

rMateOnLoadCallFunction(id)

DOM 요소 검사 후 준비가 완료되면 실행될 함수명을 설정합니다.

rMateChartH5.create() 함수의 세번째 인자인 chartVars 변수에 설정됩니다.

chartVars = "rMateOnLoadCallFunction=function_name";
rMateChartH5.create(chartId, chartHolderId, chartVars);
...
function function_name(id) {
  ...
}

Name	Type	Description
`id`	String	rMateChartH5.create() 함수의 첫번째 인자인 차트 식별자 (Identifier)

saveAsImage()

출력된 차트에 대한 스냅샷 이미지를 생성합니다.

var snapshot = document.getElementById(chartId).saveAsImage();

setChartMenu(menus)

차트 메뉴를 chartVars 의 파라메터가 아닌 함수를 통하여 설정합니다.

document.getElementbById(chartId).setChartMenu(menus);

Name	Type	Description
`menus`	function	메뉴를 설정하는 함수명

setData(value)

차트 생성시 적용될 데이터를 설정합니다.

데이터의 형태는 setDataType 에 의해서 설정된 형태와 같아야 합니다.

document.getElementById(chartId).setData(value);

Name	Type	Description
`value`	String	데이터셋이 저장된 변수명

setDataDrillDown(dataSet)

차트에 드릴다운 데이터를 설정합니다.

document.getElementById(chartId).setDataDrillDown(dataSet);

Name	Type	Description
`dataSet`	Array	드릴다운할 데이터의 객체 배열

setDataType(value)

차트 생성시 적용될 데이터의 형태를 설정합니다.

document.getElementById(chartId).setDataType(value);

Name	Type	Description
`value`	String	유효값은 json, csv, xml 입니다.

setDataURL(value)

차트 생성시 적용될 데이터에 대한 경로(URL)를 설정합니다.

해당 경로에 의해서 읽혀지는 데이터의 형태는 setDataType 에 의해서 설정된 형태와 같아야 합니다.

document.getElementById(chartId).setDataURL(value);

Name	Type	Description
`value`	String	데이터셋이 존재하는 경로 (URL)

setDefaultColors(colors)

차트의 기본(default) 색상들을 설정합니다.

알메이트 차트 제품에 설정된 기본 색상들을 변경하여 레이아웃 작성시 항상 변경된 기본 색상들을 적용할 수 있습니다.

rMateChartH5.setDefaultColors() 함수를 호출하여 차트의 기본 색상들을 변경할 수 있습니다.

colors = ["#ff0000", "#ff00ff", "#eeff00", ... ];
rMateChartH5.setDefaultColors(colors);
...
rMateChartH5.create(...);

Name	Type	Description
`colors`	Array	색상 코드 배열

setLayout(value)

차트 생성시 적용될 레이아웃을 설정합니다.

XML 형태의 스트링(String) 값을 설정합니다.

document.getElementById(chartId).setLayout(value);

Name	Type	Description
`value`	String	레이아웃이 저장된 변수명

setLayoutURL(value)

차트 생성시 적용될 레이아웃에 대한 경로(URL)를 설정합니다.

document.getElementById(chartId).setLayoutURL(value);

Name	Type	Description
`value`	String	레이아웃이 존재하는 경로 (URL)

setOnLoadCallFunction(chartId, onLoadCallFunction)

rMateOnLoadCallFunction() 함수를 설정합니다.

rMateChartH5.setOnLoadCallFunction(chartId, onLoadCallFunction);

Name	Type	Description
`chartId`	String	차트 식별자 (Identifier)
`onLoadCallFunction`	function	설정할 함수명

setRollOverIndex(seriesIndex, itemIndex, isRollOver, x, y)

selectionMode 속성값이 single 혹은 multiple 일 경우 출력되어져 있는 아이템 중 index 에 맞는 아이템을 RollOver로 강조합니다.

차트에 showDataTips가 true로 설정되어 있을 경우 툴팁도 출력됩니다.

document.getElementById(chartId).setRollOverIndex(seriesIndex, itemIndex, isRollOver, x, y);

Name	Type	Description
`seriesIndex`	Number	시리즈 인덱스
`itemIndex`	Number	해당 시리즈의 아이템 인덱스
`isRollOver`	Boolean	아이템에 RollOver 표시를 할지 여부
`x`	Number	입력할 경우 툴팁이 출력될 x좌표 값을 강제합니다.
`y`	Number	입력할 경우 툴팁이 출력될 y좌표 값을 강제합니다.

setSelectedIndex(seriesIndex, itemIndex)

selectionMode 속성값이 single 혹은 multiple 일 경우 출력되어져 있는 아이템 중 index 에 맞는 아이템을 강조합니다.

document.getElementById(chartId).setSelectedIndex(seriesIndex, itemIndex);

Name	Type	Description
`seriesIndex`	Number	선택할 시리즈의 인덱스 값
`itemIndex`	Number	선택할 데이터 아이템의 인덱스 값

setSelectedIndices(indexInfo)

selectionMode 속성값이 single 혹은 multiple 일 경우 출력되어져 있는 아이템 중 indices 에 맞는 아이템을 강조합니다.

유효값은 아래 형태로 설정합니다.

1. Array 일 경우
[
  {index : 0, items : [0, 1, 2]},
  {index : 2, items : [2, 3, 4]}
]
index - 선택할 시리즈의 인덱스 값
items - 선택할 데이터 아이템의 인덱스 값

document.getElementById(chartId).setSelectedIndices([{index : 0, items : [0, 1, 2]}, ..]);

2. Object 일 경우
{index : 0, length : 3, items : [0, 1, 2]}
index - 몇 번째 시리즈부터 선택할 지 index 값
length - index 부터 몇 번째 시리즈까지 선택할 지 개수
items - 해당 시리즈안에서 선택할 item 들의 배열 값

document.getElementById(chartId).setSelectedIndices({index : 0, length : 2, items : [0, 1, 2]});

Name	Type	Description
`indexInfo`	Array/Object	강조할 아이템의 인덱스 정보

setSlideDataSet(value)

슬라이드 차트에 적용될 데이터 세트를 배열로 설정합니다.

var slideData = [data1, data2, data3];
document.getElementById(chartId).setSlideDataSet(slideData);

Name	Type	Description
`value`	String	데이터셋들이 저장된 배열 변수명

setSlideLayoutSet(value)

슬라이드 차트에 적용될 레이아웃 세트를 배열로 설정합니다.

var slideLayout = [layout1, layout2, layout3];
document.getElementById(chartId).setSlideDataSet(slideLayout);

Name	Type	Description
`value`	String	레이아웃들이 저장된 배열 변수명

setTheme(theme)

차트(rMateChartH5)에 등록되어 있는 테마(theme)들 중에서 특정 테마(theme)를 차트에 적용합니다.

rMateChartH5.registerTheme() 에 의해서 등록된 테마(theme)들 중에서 하나를 적용할 수 있습니다.

rMateChartH5.setTheme(theme);

Name	Type	Description
`theme`	Object	적용할 테마(theme) 데이터 객체

showAdditionalPreloader()

프리로더를 실행합니다.

사용자가 차트 내에 프리로더를 실행/제거 할 수 있습니다.

document.getElementById(chartId).showAdditionalPreloader();

showDataEditor()

데이터 에디터를 보이도록 설정합니다.

document.getElementById(chartId).showDataEditor();

sliderPause()

모션 차트에서 슬라이드를 중단하도록 설정합니다.

document.getElementById(chartId).sliderPause();

sliderPlay()

모션 차트에서 슬라이드를 실행하도록 설정합니다.

document.getElementById(chartId).sliderPlay();

sliderReset()

모션 차트에서 슬라이드를 초기화하도록 설정합니다.

document.getElementById(chartId).sliderReset();

tableToArray(tableId, categoryField, direction)

HTML 의 <table> 데이터를 배열 데이터로 변환합니다.

var chartData = rMateChartH5.tableToArray(tableId, categoryField, direction);

Name	Type	Description
`tableId`	String	배열로 변환하려는 <table> 식별자 (Identifier)
`categoryField`	String	차트 레이아웃에서 CategoryAxis 클래스 인스턴스가 참조하는 데이터 필드명
`direction`	String	categoryField 에 적용될 데이터의 방향(테이블의 가로/세로)을 설정 - horizontal, vertical

updateCrossRange(type, x, y)

다른 차트들과 십자선(CrossRangeZoomer)의 위치를 동기화하기 위한 함수입니다.

CrossRangeZoomer 클래스 인스턴스의 rangeUpdateJsFunction 속성값에 사용자 정의 자바스크립트 함수가 설정되어 있을 경우, 해당 함수의 인자들을 다른 차트의 십자선(CrossRangeZoomer) 위치값으로 전달합니다.

만약 이 기능을 사용할 경우, rangeUpdateJsFunction 속성에 설정된 자바스크립트 함수의 인자가 그대로 updateCrossRange 함수의 인자로 전달됩니다.

document.getElementById(chartId).updateCrossRange(type, x, y);

Name	Type	Description
`type`	Event	마우스 이벤트의 타입명
`x`	Number	십자선의 X 위치 비율값
`y`	Number	십자선의 Y 위치 비율값

visibleItemSize(value)

스크롤 차트에서 화면에 보여지는 아이템의 개수를 설정합니다.

document.getElementById(chartId).visibleItemSize(value);

Name	Type	Description
`value`	Number	화면에 표시할 데이터의 개수

Class: rMateChartH5

new rMateChartH5()

Members

dataEditorUrlString

patternImageBaseUrlString

patternImagesUrlString

useDataEditorString

usePatternString

Methods

accessibilityPattern(value)

changeScrollBarSize(size)

clear(chartId)

clearSelection()

create(chartId, chartHolderId, chartVars, hSize, vSize, onLoadCallFunction)

destroy(chartId)

getChartData()

getCSVData()

getDrillDownDepth()

getSelectedChartItem()

getSnapshot()

hasNoData()

hideDataEditor()

legendAllCheck(value)

legendCheck(index, value)

registerTheme(theme)

removeAdditionalPreloader()

removeTheme(theme)

resize()

rMateOnLoadCallFunction(id)

saveAsImage()

setChartMenu(menus)

setData(value)

setDataDrillDown(dataSet)

setDataType(value)

setDataURL(value)

setDefaultColors(colors)

setLayout(value)

setLayoutURL(value)

setOnLoadCallFunction(chartId, onLoadCallFunction)

setRollOverIndex(seriesIndex, itemIndex, isRollOver, x, y)

setSelectedIndex(seriesIndex, itemIndex)

setSelectedIndices(indexInfo)

setSlideDataSet(value)

setSlideLayoutSet(value)

setTheme(theme)

showAdditionalPreloader()

showDataEditor()

sliderPause()

sliderPlay()

sliderReset()

tableToArray(tableId, categoryField, direction)

updateCrossRange(type, x, y)

visibleItemSize(value)