/ /

임베딩

임베딩 SDK

Docs Home

개발

차트

임베딩

임베딩 SDK

클릭 이벤트 처리

참고

Charts 임베딩 SDK 의 클릭 이벤트는 버전 2에서 사용할 수 있습니다.1.0 그리고 나중에.

Atlas Charts 임베딩 JavaScript SDK에는 클릭 이벤트를 구독할 수 있는 클릭 이벤트 핸들러가 포함되어 있습니다. 차트의 특정 요소를 클릭하면 클릭 이벤트 핸들러가 클릭한 요소의 세부 정보를 캡처합니다. 이 기능을 사용하여 애플리케이션에서 다음과 유사한 대화형 환경을 구축할 수 있습니다.

차트에서 요소를 클릭하고 클릭한 요소에 대한 자세한 세부 정보가 포함된 창을 엽니다.
다른 차트에 대한 필터를 만듭니다.

전제 조건

시작 하기 전에 버전 2.1.0 이상 차트 임베딩 JavaScript SDK.

클릭 이벤트 구문

이벤트 핸들러는 이벤트 유형인 click 과 클릭 이벤트 와 클릭된 요소에 대한 정보가 포함된 콜백 함수를 단일 페이로드 객체 로 사용합니다. 클릭 이벤트 핸들러 구문은 다음과 유사합니다.

chart.addEventListener("click", callback);

또한 이벤트 핸들러를 사용하면 이벤트 정보를 수신하려는 표시 역할을 정의할 수 있으므로 페이로드를 확인할 필요가 없습니다. 필터링할 표시 역할을 정의하기 위한 클릭 이벤트 핸들러 구문은 다음과 유사합니다.

const options = { includes: [{ roles: ['mark', 'axis-label'] }] };
chart.addEventListener("click", callback, options);

다음 예제와 같이 차트 렌더링이 완료된 후에 클릭 이벤트 핸들러를 추가해야 합니다.

예시

chart.render(document.getElementById("chart")).then(
     () => chart.addEventListener('click',
       (payload) => alert(JSON.stringify(payload)),
       options)
   );

참고

options 매개변수를 지정하면 클릭 이벤트 핸들러는 클릭된 표시의 역할이 매개변수에 지정된 값 중 하나와 일치하는 경우에만 이벤트를 캡처합니다. 이 매개변수를 생략하면 클릭 이벤트 핸들러가 차트의 모든 클릭 이벤트를 캡처합니다.

Payload

클릭 이벤트 페이로드를 사용하여 애플리케이션의 다른 Atlas Charts에 적용할 수 있는 사용자 지정 필터를 구성할 수 있습니다. 콜백 함수에 대한 페이로드 객체의 구문은 다음과 유사합니다.

chart.addEventListener("click", (payload) => {
    // handle events
}

다음 예제 페이로드 객체는 페이로드 내부의 요소를 보여줍니다.

예시

{
  "chartId": "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "chartTitle": "This is my chart's title",
  "chartDescription": "This is my chart's description",
  "event": { // information about the mouse event. For example:
    "type": "click", // event type
    "altKey": false, // modifier keys
    "ctrlKey": false,
    "shiftKey": false,
    "metaKey": false,
    "offsetX": 152, // element coordinates
    "offsetY": 176,
    "clientX": 172, // coordinates from application viewpoint
    "clientY": 241,
    "pageX": 172, // coordinates relative to the page
    "pageY": 241,
    "screenX": 172, // coordinates relative to screen
    "screenY": 312
  },
  "data": { // information about the clicked chart element. For example:
    "y": {
      "label": "unwind array 'genres'",
      "value": "Adventure"
    },
    "x": {
      "label": "count ( _id )",
      "value": 659
    },
    "color": {
      "label": "year",
      "value": "2000 - 2010",
      "lowerBound": 2000,
      "upperBound": 2010
    }
  },
  selectionFilter: {
    // category data expressed as MQL filter query that
    // interactive filters would output to filter other charts.
    // For example:
    genres: 'Adventure',
    year: {
      $gte: 2000,
      $lt: 2010,
    },
  },
  "target": { // information about the clicked target. For example:
    "type": "rect", // type of mark, such as rect, line, etc.
    "role": "mark", // role of mark, such as mark, legend, etc.
    "fill": "#8CB6F2" // fill color of the mark
  },
  "apiVersion": 1 // API version of event payload
}

페이로드 객체 내부의 요소에 대해 자세히 알아보려면 다음을 참조하세요.

event 요소
data 요소
selectionFilter 요소
target 요소

`event` 요소

페이로드 의 event 요소에는 다음을 포함한 마우스 이벤트 에 대한 정보가 포함되어 있습니다.

마우스 이벤트의 유형으로, 다음과 같아야 합니다. click
클릭 이벤트를 trigger하는 데 사용되는 수정자 키(예: altKey, ctrlKey, shiftKey, metaKey
X 및 Y 좌표입니다.
- 차트의 캔버스 요소를 기준으로 합니다.
- 애플리케이션 관점에서
- 페이지 기준
- 화면 기준

`data` 요소

페이로드 의 data 요소에는 클릭한 차트 요소에 대한 정보가 포함되어 있습니다. 인코딩된 각 데이터 필드 (x, y, series, intensity, color, shape, size, label, arc, value, target, number, display, text, location), data 요소에는 다음이 포함됩니다.

채널 label
클릭한 요소의 value
숫자 또는 날짜 빈(bin) 전용의 하한값입니다.

테이블 의 경우 Atlas Charts 임베딩 JavaScript SDK 클릭 이벤트 핸들러가 클릭된 요소의 채널 데이터를 나타내는 필드에 대한 클릭 이벤트를 캡처합니다.

groups 레이블 및 값을 포함한 모든 그룹 채널이 포함된 필드
cell 클릭한 셀의 열 머리글 레이블 및 값이 포함된 필드

Atlas Charts 의 경우, JavaScript SDK 클릭 이벤트 핸들러는 다음 요소에 대한 클릭 이벤트를 캡처합니다.

단계구분도 Atlas Charts 의 경우 클릭 이벤트 핸들러는 클릭된 요소의 채널 데이터를 나타내는 필드를 캡처합니다.
- lat 필드에 위도가 포함됩니다.
- lng 경도가 포함된 필드
- location 필드는 클릭한 지리 공간적 공간 영역의 필드 레이블과 값을 포함합니다.
지리 공간적 Atlas Charts 의 경우 클릭 이벤트 핸들러는 클릭된 요소의 채널 데이터를 나타내는 필드를 캡처합니다.
- geopoint 필드에는 필드 이름, GeoJSON 형식의 값, 클릭한 포인트의 좌표가 포함됩니다.

`selectionFilter` 요소

페이로드의 selectionFilter 요소는 연속형 차트 에서 클릭된 마크의 카테고리 채널 또는 x 값 채널 에 해당하는 필터하다 나타내는 유효한 MQL 필터하다 문서 포함해야 합니다. 자체 selectionFilter를 수정하거나 구현 수 있습니다.

필터 객체는 클릭된 단일 항목을 나타냅니다.

동등성 매치 쿼리 ({field: value}) 또는 $eq, $ne, $in 또는 $nin 연산자를 사용하는 쿼리가 되는 문자열 또는 빈이 없는 숫자나 날짜입니다.
빈 숫자 또는 날짜로, gt, $gte, $lt 또는 lte 연산자를 사용하는 쿼리가 됩니다. 주기적 날짜는 무시됩니다.

예시

{ field: 'value' }
{ field1: 'value1', field2: 'value2' }
{ field: { $in: [ 'a', 'b', 'c' ] } }
{ field: { $nin: [ 'x', 'y', 'z' ] } }
{ field: { $gt: 10 } }
{ field: { $gt: 13, $lte: 30 } }
{ field: { $gt: Date("2020-01-01"), $lt: Date("2020-03-31") } }

selectionFilter 문서에는 여러 개의 키 및 값 필터가 있을 수 있습니다. 예를 들어 다중 시리즈 차트의 마크를 클릭하면 필터 문서에 범주 필터 쌍과 시리즈 필터 쌍이 모두 포함됩니다. 각 필터는 해당 레이블이 아닌 사용된 실제 데이터 소스 필드를 참고해야 합니다.

setHighlight 메서드를 사용하여 클릭된 이벤트에 대해 강조 표시를 활성화할 수 있습니다.

예시

const eventHandler = (payload) => {
  chart.setHighlight(payload.selectionFilter);
};
chart.render(container).then(() => {
  chart.addEventListener('click', eventHandler);
});

자세한 내용은 차트 요소 강조 표시를 참조하세요.

요소 역할에 대한 필터가 있는 이벤트 핸들러가 포함된 내장된 차트에는 차트에 다음이 표시됩니다.

The Atlas Triggers를 트리거하는 요소 위로 마우스를 가져가면 이벤트
The trigger 이벤트를 트리거하지 않는 요소 위로 마우스를 가져가면

이벤트 핸들러에 요소 역할에 대한 필터가 포함되어 있지 않으면 차트 요소 위로 마우스를 가져가면 표시됩니다.

`target` 요소

페이로드 의 target 요소에는 다음을 포함하여 클릭된 대상에 대한 정보가 포함되어 있습니다.

표시 유형(예: rect, line, arc, symbol, group 또는 area
표시의 역할(예: mark, legend, axis-label, axis-title, tick-label, legend-entry, legend-title 또는 frame
표시의 채우기 색상

테이블 의 경우 Atlas Charts 임베딩 JavaScript SDK 클릭 이벤트 핸들러 페이로드가 다음을 캡처합니다.

표시 유형은 다음과 같습니다. text
표시 역할(예: group-cell, value-cell, dynamic-value-cell, row-total-cell, column-total-cell, header-column-total-cell 및 grand-total-cell

Atlas Charts의 경우, Atlas Charts 임베딩 JavaScript SDK 클릭 이벤트 핸들러 페이로드는 다음을 캡처합니다.

표시 유형(예: polygon, map 또는 symbol
표시의 역할(예: mark 또는 map
표시의 채우기 색상

Atlas Charts 임베딩 JavaScript SDK 클릭 이벤트 핸들러가 열 헤더의 클릭 이벤트를 캡처하지 않습니다.

예시

Charts 임베딩 JavaScript SDK에는 애플리케이션에서 클릭 이벤트의 일반적인 용도를 보여주는 예제가 포함되어 있습니다. 첫 번째 예는 기본 클릭 이벤트와 페이로드 처리를 보여줍니다. 두 번째 예는 클릭한 차트 요소의 대화형 필터링을 보여줍니다.

임베딩 SDK를 설치하고 자체 데이터 또는 샘플 데이터로 예시 앱 실행 에 대해 자세히 학습하려면 Github 에서 Atlas Charts 클릭 이벤트 임베딩 예제를 참조하세요. 각 예시 앱 해당 앱 에 특정한 차트 ID 와 기본 URL 로 구성됩니다. 올바른 차트 ID 및 기본 URL 사용하여 자체 앱을 구성해야 합니다.

클릭 이벤트의 기본 처리

클릭 이벤트의 기본 처리를 위한 예시 앱 에서 차트 의 요소를 클릭하면 Movie Genres 클릭 이벤트 핸들러는 클릭된 요소를 기반으로 데이터를 표시합니다. 이 예시 애플리케이션 에서는 차트 에 마크 역할에 대한 필터하다 포함되어 있지 않기 때문에 차트 에 모든 차트 요소에 표시됩니다.

차트의 요소를 클릭할 때마다 클릭 이벤트 리스너가 payload 를 새로 고쳐 x 및 y 축의 데이터를 반영합니다. Movie Genres 차트에서 특정 장르와 10년을 나타내는 요소를 클릭하면 Clicked Element 및 Full Event Payload 에 다음을 포함하여 해당 영화 장르 및 10년에 대한 세부 정보가 표시됩니다.

클릭한 요소의 데이터를 나타내는 필드입니다.
표시 유형, 역할 및 채우기 색상

전체 이벤트 페이로드를 보려면 예제 앱을 참조하세요.

클릭 이벤트에 대한 대화형 필터링

대화형 필터링용 예시 앱 에서 Movie Genres 차트의 요소를 클릭하면 임베딩 SDK가 클릭한 요소를 기반으로 필터하다 생성한 다음 두 번째 차트에 필터하다 적용합니다. 이 예시 애플리케이션 에서는 차트 에 다음이 표시됩니다.

The 대화형 요소 위로 마우스를 가져가면
The trigger 이벤트를 이벤트하지 않는 요소 위로 마우스를 가져가면

클릭 이벤트 리스너는 options 매개변수를 통해 지정된 표시 역할에 대해서만 Atlas Triggers 이벤트를 합니다. 페이로드는 영화 장르를 나타내는 y 축과 10년을 나타내는 하한 및 상한 범위를 기반으로 필터를 정의합니다. Movie Genres 차트에서 특정 장르 및 세기를 나타내는 요소를 클릭할 때마다 Movie Details 표가 클릭한 요소별로 필터링되고 해당 장르 및 세기에서 사용할 수 있는 영화가 표시되도록 변경됩니다.

전체 샘플 이벤트 핸들러 콜백 함수를 보려면 예제 앱을 참조하세요.

돌아가기

인증 제공자 구성

차트 요소 강조 표시

클릭 이벤트 처리

전제 조건

클릭 이벤트 구문

Payload

event 요소

data 요소

selectionFilter 요소

target 요소

예시