차트 생성 함수

rMateOnLoadCallFunction 함수를 이용한 차트 생성

차트를 생성하기 위한 레이아웃과 데이터셋의 작성이 완료되면 알메이트 차트에서 제공하는 API 함수를 이용하여 차트를 생성할 수 있습니다. 차트를 생성하기 위해서 호출하는 함수는 rMateChartH5.create() 입니다. 다음은 rMateOnLoadCallFunction 함수를 이용하여 차트를 생성하는 자바스크립트 문장입니다.

1. chartVars 변수: 알메이트 차트를 생성할 때 반드시 필요한 변수이며, 다음 설명을 참조하십시요.

• 스트링 변수이며 변수의 이름은 변경하여도 관계없습니다. 만약 변수 이름을 다르게 사용할 경우, rMateChartH5.create() 함수의 파라미터에도 변경된 이름의 변수명을 사용해야 합니다.

• 변수에 저장되는 값은 “name=value” 형식의 쌍으로 구성되며, 각 “name=value” 쌍의 구분은 “&”을 구분자로 이용합니다. 다음은 레이아웃 파일의 URL과 XML 형식의 데이터셋의 URL을 “&” 구분자를 지정하여 설정한 예제입니다.

  var layoutURL = "./Column_3D_Layout.xml";

  var chartVars = "layoutURL="+layoutURL;

  var dataURL = "./singleData.xml";

  chartVars += "&dataURL="+dataURL;

• 차트 생성 준비가 완료되면 실행될 함수명을 지정하는 rMateOnLoadCallFunction 값은 반드시 chartVars 변수에 저장되어야 합니다.

  var chartVars = "rMateOnLoadCallFunction=chartReadyHandler";

  다음은 chartVars 변수에 설정이 가능한 값들과 이에 대한 설명입니다.

  속성명	유효값 (*: 기본값)	Description
  layoutURL	URL	외부 파일을 레이아웃으로 이용할 경우, 이 파일에 대한 URL을 설정합니다.
  dataURL	URL	외부 파일을 데이터셋으로 이용할 경우, 이 파일에 대한 URL을 설정합니다
  rMateOnLoadCallFunction	자바스크립트 함수명	차트를 생성할 준비가 완료된 후 호출할 함수를 설정합니다. (1 회만 호출됨) 파라미터: id – 차트 생성시 사용자가 지정한 id. (rMateChartH5.create() 함수의 첫 번째 파라미터)
  displayCompleteCallFunction	자바스크립트 함수명	차트에 데이터가 모두 렌더링된 후 호출할 함수를 설정합니다. 파라미터: id – 차트 생성시 사용자가 지정한 id. (rMateChartH5.create() 함수의 첫 번째 파라미터)
  useDataEditor	true, false(*)	생성되는 차트에 데이터 에디터를 사용할지 여부를 설정합니다.
  usePattern	true, false(*)	생성되는 차트에 패턴 이미지를 적용할지 여부를 설정합니다.

  주의

  rMateOnLoadCallFunction 과 displayCompleteCallFunction 의 차이점: rMateOnLoadCallFunction 에 설정되는 함수는 차트를 생성하기 위한 준비가 완료된 후 호출되는 함수 입니다. 이 함수가 실행될 때 레이아웃과 데이터셋을 차트에 설정하는 작업을 하게됩니다. 그러나 displayCompleteCallFunction 에 설정되는 함수는 차트에 레이아웃과 데이터셋이 설정되어 차트 생성이 완료되었을 경우에 호출됩니다. 차트 생성이 마무리된 시점에 어떤 작업을 해야 할 경우 유용하게 활용되는 함수입니다.

2. rMateChartH5.create(): 차트 생성 작업을 시작하는 함수입니다. 다음은 rMateChartH5.create() 함수를 호출한 예입니다. 함수에 사용되는 파라미터에 대한 설명은 아래 표와 같습니다.

주의

위 예제에서 차트가 위치할 <div> 의 크기는 가로 600px, 세로 400px 로 지정이 되었고, rMateChartH5.create() 함수에서는 가로, 세로 각각 100% 로 설정이 되었으므로 결과적으로 생성되는 차트의 크기는 가로 600px, 세로 400px 가 됩니다. rMateChartH5.create() 함수에서 크기를 100% 로 지정하더라도 차트가 위치할 <div> 에 크기를 지정하지 않았거나 차트를 표현하기에 충분한 크기가 지정되지 않으면 차트가 정상적으로 표시되지 않을 수 있으니 주의하십시요.

3. rMateOnLoadCallFunction에 지정되는 함수

rMateOnLoadCallFunction 에 지정되는 함수는 차트를 생성할 준비가 완료된 시점에서 호출됩니다. 함수 내에서는 보통 다음과 같이 레이아웃과 데이터셋을 설정하는 알메이트 차트가 제공하는 API 함수를 호출합니다.

위 예제는 아래와 같이 스트링 변수에 저장된 레이아웃과 JSON 형식의 배열 변수에 저장된 데이터셋을 차트에 설정하는 방식의 코드입니다.

레이아웃과 데이터셋을 차트에 설정하는 함수는 두 가지 유형이 있습니다. 한 가지는 자바스크립트 내의 변수에 저장된 값을 설정하는 것이고(setLayout(), setData()) 다른 한 가지는 자바스크립트 외부에 저장된 파일을 설정하는 것입니다. (setLayoutURL(), setDataURL()) 데이터셋을 외부 파일을 이용해서 설정할 경우 기본 형식은 XML 입니다. 만약 JSON 형식의 배열이나 CSV 형식을 이용해야 할 경우에는 setDataType() 함수를 setDataURL() 함수가 호출되기 전에 먼저 호출해야 합니다. 이 때 setDataType() 함수의 파라미터 값은 JSON 형식의 배열일 경우에는 “json” (setDataType(“json”)), CSV 형식일 경우에는 “csv” (setDataType(“csv”)) 입니다. 다음은 레이아웃과 데이터셋을 호출하는 함수의 가능한 조합을 표로 나타낸 것입니다.

rMateChartH5.call 함수를 이용한 차트 생성

rMateChartH5.call 함수를 이용하여 좀 더 간단한 방식으로 차트를 생성할 수 있습니다. 이 경우에는 rMateChartH5.create() 함수의 세번째 파라미터에 chartVars 변수를 지정할 필요가 없습니다. rMateOnLoadCallFunction 함수에 의해서 차트의 레이아웃과 데이터셋을 설정하지 않고 rMateChartH5.call 함수를 실행하여 레이아웃과 데이터셋을 설정하기 때문입니다.

다음은 rMateChartH5.call 함수를 통해서 레이아웃과 데이터셋을 설정하는 코드입니다.

rMateChartH5.calls 함수는 한번에 실행될 자바스트립트 함수를 여러 개 등록할 수 있습니다. 위 예제에서는 레이아웃(setLayout)과 데이터셋(setData)을 설정하기 위한 자바스크립트 함수를 rMateChartH5.call 함수를 이용하여 각각 등록하였지만 다음 예제에서는 rMateChartH5.calls 함수를 이용하여 레이아웃(setLayout)과 데이터셋(setData)을 설정하기 위한 자바스크립트 함수를 한번에 등록하는 것을 보여줍니다. 처음 차트 만들기에서 예제 코드의 실행을 확인하실 수 있습니다.