시각화는 호스트 페이지에서 수신하도록 등록할 수 있는 이벤트를 실행할 수 있습니다.
이벤트는 사용자 작업(예: 사용자가 차트 클릭)에 의해 시작되거나 내부 이벤트(예: 10초마다 이벤트 실행)로 시작될 수 있습니다. 특정 이벤트가 발생할 때마다 해당 이벤트와 관련된 데이터를 사용하여 호출되도록 JavaScript 메서드를 등록할 수 있습니다.
모든 시각화는 자체 이벤트를 정의하며, 해당 시각화를 위한 문서에서는 각 이벤트가 실행되는 시점, 의미, 이벤트 핸들러에 전송하는 정보를 설명해야 합니다 (예: 조직 차트 시각화 참고). 이 페이지에서는 시각화 생성자가 이벤트를 실행하는 방법을 설명합니다.
클라이언트가 이벤트를 수신하기 위해 등록하는 방법을 알아보려면 이벤트 처리 페이지를 참고하세요.
선택 가능한 시각화에서 실행해야 하는 하나의 이벤트, 즉 select 이벤트가 있습니다.
그러나 이 이벤트의 동작과 의미는 각 시각화에 의해 정의됩니다.
draw 메서드가 사용자에게 컨트롤을 반환한 직후 시각화가 상호작용할 준비가 되지 않았다면 준비 이벤트인 시각화가 실행되어야 합니다.
이 이벤트의 정확한 동작과 의미는 준비된 이벤트 섹션에 정의되어 있습니다.
시각화 API 이벤트는 표준 DOM 이벤트와 별개이며 서로 다르다는 점에 유의해야 합니다.
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', {});
};
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-07-10(UTC)"],[[["\u003cp\u003eVisualization creators can fire custom events or standard events like 'select' and 'ready' using \u003ccode\u003egoogle.visualization.events.trigger()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe 'select' event is fired when a user interacts with data, requiring \u003ccode\u003egetSelection()\u003c/code\u003e and \u003ccode\u003esetSelection()\u003c/code\u003e methods for data retrieval and manipulation.\u003c/p\u003e\n"],["\u003cp\u003eThe 'ready' event signals that a visualization is ready for user interaction, typically fired after the \u003ccode\u003edraw()\u003c/code\u003e method completes; any interaction before this event might not work as expected.\u003c/p\u003e\n"],["\u003cp\u003eHost pages can listen for these events using \u003ccode\u003egoogle.visualization.events.addListener()\u003c/code\u003e or \u003ccode\u003egoogle.visualization.events.addOneTimeListener()\u003c/code\u003e to respond accordingly.\u003c/p\u003e\n"],["\u003cp\u003eWhile each visualization defines its own events, the 'select' and 'ready' events follow specific guidelines for consistency and usability.\u003c/p\u003e\n"]]],[],null,["# Firing Events\n\nYour visualization can fire events that a host page can register to receive.\nEvents can be fired by user actions: for example a user clicks on a chart,\nor can be internal: for example, firing an event every 10 seconds. You can register\na Javascript method to be called whenever certain events are fired, possibly with\ndata specific to that event.\n\nEvery visualization defines its own events, and the documentation for that visualization\nshould describe when each event is fired, what it means, and what information it\nsends to your event handler (for example, see the [orgchart\nvisualization](/chart/interactive/docs/gallery/orgchart)). This page describes how a visualization creator can fire events.\nTo learn how clients can register to receive events, see the [Handling\nEvents](/chart/interactive/docs/events) page.\n\nThere is one event that any selectable visualization should fire: the select event.\nHowever, the behavior and meaning of this event is defined by each visualization.\n\nIf a visualization is not ready for interaction immediately after the `draw` method returns control to the user, the visualization should fire: the ready event.\nThe exact behavior and meaning of this event is defined in [The Ready Event](#The_Ready_Event) section.\n\nIt is important to note that the Visualization API events are separate and distinct\nfrom the standard DOM events.\n\nContents\n--------\n\n1. [Firing an Event](#Triggering_an_Event)\n2. [The Select Event](#The_Select_Event)\n3. [The Ready Event](#The_Ready_Event)\n4. [More Information](#moreinfo)\n\nFiring an Event\n---------------\n\nTo fire an event from your visualization, call the [google.visualization.events.trigger()](/chart/interactive/docs/reference#trigger) function.\nThe function expects the following parameters:\n\n1. Source visualization (typically this is the `this` value).\n2. Event name (string).\n3. Event details (Object). An optional map (name/value) of specific event details.\n\n\nThe following example shows how a visualization throws the select event: \n\n```carbon\nMyVisualization.prototype.onclick = function(rowIndex) {\n this.highlightRow(this.selectedRow, false); // Clear previous selection\n this.highlightRow(rowIndex, true); // Highlight new selection\n\n // Save the selected row index in case getSelection is called.\n this.selectedRow = rowIndex;\n\n // Fire a select event.\n google.visualization.events.trigger(this, 'select', {});\n};\n```\n\nHosting pages can register to receive your events by calling [google.visualization.events.addListener()](/chart/interactive/docs/reference#addlistener) or [google.visualization.events.addOneTimeListener()](/chart/interactive/docs/reference#addonetimelistener).\nBe sure to document thoroughly any events that you fire.\n\nThe Select Event\n----------------\n\nThe \"select\" event is a standard event thrown by many visualizations\nin response to a user mouse click. If you choose to fire an event in response to\nmouse clicks, you should implement the \"select\" event in the standard way described\nhere:\n\n1. Fire an event with the name 'select' when the user selects some data within the visualization. The event does not send any arguments to the listening functions.\n2. Expose the [getSelection()](/chart/interactive/docs/reference#visgetselection) method as described in the linked document section. This method should return the indexes of **data** elements that the user selected. \n3. Expose a [setSelection()](/chart/interactive/docs/reference#vissetselection) method as described in the [reference](/chart/interactive/docs/reference#vissetselection) section. Also see the [handling events](/chart/interactive/docs/events) page to learn how to handle events.\n\n\u003cbr /\u003e\n\nThe Ready Event\n---------------\n\nAny visualization should fire a \"ready\" event that works in a standard way to let the developer know when the visualization\nis ready to process called methods. (However, there is no absolute *requirement* that\na visualization behave this way; check the documentation for your visualization).\n\nIn general, visualizations that expose the \"ready\" event are designed with the\nfollowing specifications:\n\n- The ready event does not pass any properties to the handler (your function handler should not expect any parameters to be passed to it).\n- The visualization *should* fire the ready event after the visualization is ready for interaction. If the drawing of the visualization is asynchronous, it is important that the event is fired when interaction methods can actually be called, and not just when the `draw` method ends.\n- Adding a listener to this event should be done before calling the `draw` method, because otherwise the event might be fired before the listener is set up and you will not catch it.\n- By calling interaction methods before the ready event is fired, you take a risk that these methods will not work properly.\n\n\nThe convention is that visualizations which do not fire a \"ready\" event are ready for interaction immediately after the `draw` method ends and returns control to the user.\n\nMore Information\n----------------\n\n- [Controls and Dashboards](/chart/interactive/docs/gallery/controls)\n- [getSelection()](/chart/interactive/docs/reference#visgetselection)\n- [`google.visualization.events.addListener()`](/chart/interactive/docs/reference)"]]
