실행 이벤트

시각화를 통해 호스트 페이지가 수신할 수 있는 이벤트를 실행할 수 있습니다. 이벤트는 사용자가 차트를 클릭하는 등 사용자 작업에 의해 시작되거나 내부에서 실행될 수 있습니다(예: 10초마다 이벤트 실행). 특정 이벤트가 발생할 때마다 호출되도록 자바스크립트 메서드를 등록하고 해당 이벤트와 관련된 데이터를 사용할 수도 있습니다.

모든 시각화는 자체 이벤트를 정의하며, 이 시각화에 관한 문서는 각 이벤트가 실행된 시점, 의미와 이벤트 핸들러로 전송되는 정보 (예: orgchart 시각화 참고)를 설명해야 합니다. 이 페이지에서는 시각화 크리에이터가 이벤트를 실행하는 방법을 설명합니다. 클라이언트가 이벤트를 수신하도록 등록하는 방법을 알아보려면 이벤트 처리 페이지를 참조하세요.

선택 가능한 시각화가 실행해야 하는 이벤트 하나는 선택 이벤트입니다. 그러나 이 이벤트의 동작과 의미는 각 시각화에 의해 정의됩니다.

draw 메서드가 사용자에게 컨트롤을 반환한 직후 시각화가 상호작용할 준비가 되지 않았다면 시각화가 준비 이벤트로 실행되어야 합니다. 이 이벤트의 정확한 동작과 의미는 준비된 이벤트 섹션에 정의되어 있습니다.

시각화 API 이벤트는 표준 DOM 이벤트와 별개이며 서로 다릅니다.

목차

이벤트 실행

시각화에서 이벤트를 실행하려면 google.visualization.events.trigger() 함수를 호출합니다. 이 함수에는 다음과 같은 매개변수가 필요합니다.

  1. 소스 시각화 (일반적으로 this 값)
  2. 이벤트 이름 (문자열)입니다.
  3. 이벤트 세부정보 (객체) 특정 이벤트 세부정보의 선택적 지도 (이름/값)입니다.

다음 예는 시각화에서 선택 이벤트를 발생시키는 방법을 보여줍니다.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Fire a select event.
  google.visualization.events.trigger(this, 'select', {});
};

호스팅 페이지는 google.visualization.events.addListener() 또는 google.visualization.events.addOneTimeListener()를 호출하여 이벤트를 수신할 수 있습니다. 발생한 모든 이벤트를 빠짐없이 기록해야 합니다.

이벤트 선택

'select' 이벤트는 사용자 마우스 클릭의 응답으로 여러 시각화에서 발생하는 표준 이벤트입니다. 마우스 클릭에 대한 응답으로 이벤트를 시작하도록 선택한 경우 다음과 같이 일반적인 방법으로 'select' 이벤트를 구현해야 합니다.

  1. 사용자가 시각화 내에서 데이터를 선택할 때 이름이 'select'인 이벤트를 실행합니다. 이 이벤트는 리슨 함수에 인수를 전송하지 않습니다.
  2. 연결된 문서 섹션에 설명된 대로 getSelection() 메서드를 노출합니다. 이 메서드는 사용자가 선택한 data 요소의 색인을 반환해야 합니다.
  3. 참조 섹션에 설명된 대로 setSelection() 메서드를 노출합니다. 이벤트 처리 페이지에서도 이벤트 처리 방법을 알아볼 수 있습니다.

Ready 이벤트

모든 시각화는 시각화가 메서드라고 처리할 준비가 되었을 때 개발자에게 알리는 표준 방식으로 작동하는 '준비' 이벤트를 실행해야 합니다. 하지만 시각화가 이러한 방식으로 작동해야 하는 절대적인 요구사항은 없으며 시각화에 관한 문서를 확인하시기 바랍니다.

일반적으로 '준비됨' 이벤트를 노출하는 시각화는 다음과 같은 사양으로 설계됩니다.

  • 준비된 이벤트는 어떤 속성도 핸들러에 전달하지 않습니다 (함수 핸들러는 전달된 매개변수가 없어야 함).
  • 시각화가 상호작용할 준비가 되면 시각화에서 준비 이벤트를 실행해야 합니다. 시각화를 비동기식으로 그리는 경우 draw 메서드가 종료될 때뿐만 아니라 상호작용 메서드를 실제로 호출할 수 있을 때 이벤트가 실행되는 것이 중요합니다.
  • draw 메서드를 호출하기 전에 이 이벤트에 리스너를 추가해야 합니다. 그러지 않으면 리스너가 설정되기 전에 이벤트가 발생할 수 있으므로 포착하지 못하게 됩니다.
  • 준비된 이벤트가 실행되기 전에 상호작용 메서드를 호출하면 이러한 메서드가 제대로 작동하지 않을 위험이 있습니다.

규칙은 '준비' 이벤트를 실행하지 않는 시각화가 draw 메서드가 종료되고 사용자에게 제어 권한을 반환하는 즉시 상호작용할 준비가 되어 있다는 것입니다.

추가 정보