컨트롤 및 대시보드

이 페이지에서는 여러 차트를 대시보드로 결합하고 사용자에게 표시할 데이터를 조작할 수 있는 제어 기능을 제공하는 방법을 설명합니다.

개요

대시보드를 사용하면 동일한 기본 데이터를 공유하는 여러 차트를 함께 구성하고 관리할 수 있습니다. 이 페이지에 설명된 API를 사용하면 함께 연결하고 유일하게 대시보드에 속한 모든 차트를 조정하는 부담에서 벗어날 수 있습니다.

대시보드는 google.visualization.Dashboard 클래스를 사용하여 정의됩니다. Dashboard 인스턴스는 대시보드에 포함된 모든 차트에 데이터를 그리고 배포하고 시각화하기 위한 데이터가 포함된 DataTable를 수신합니다.

컨트롤은 대시보드에서 관리되는 데이터 및 데이터에 포함된 차트를 구동하기 위해 상호작용하는 사용자 인터페이스 위젯 (예: 카테고리 선택 도구, 범위 슬라이더, 자동 완성기 등)입니다.

컨트롤은 google.visualization.ControlWrapper 클래스를 사용하여 정의됩니다. 배관 시스템의 파이프와 밸브처럼 작동하는 ControlWrapper 인스턴스를 대시보드에 추가할 수 있습니다. 대시보드는 사용자 입력을 수집하고 이 정보를 사용하여 대시보드에서 관리하는 데이터를 대시보드에 포함된 차트에 제공해야 합니다.

카테고리 선택 도구와 범위 슬라이더가 원형 차트로 시각화된 데이터를 구동하는 데 사용되는 다음 예를 살펴보세요.

참고: 대시보드는 대화형입니다. 컨트롤을 작동해 보고 차트 변경사항을 실시간으로 확인하세요.

컨트롤 및 대시보드 사용

대시보드를 만들고 페이지에 삽입하기 위한 주요 단계는 다음과 같습니다. 아래에서 이러한 모든 단계를 보여주는 코드 스니펫을 확인하고 각 단계에 관한 자세한 정보를 확인하세요.

  1. 대시보드에 사용할 HTML 스켈레톤을 생성합니다. 페이지의 모든 멤버를 보유하는 데 필요한 만큼의 HTML 요소가 페이지에 있어야 합니다. 여기에는 대시보드 및 대시보드에 속한 모든 컨트롤과 차트가 포함됩니다. 일반적으로 각각에 <div>를 사용합니다.
  2. 라이브러리를 로드합니다. 대시보드를 사용하려면 Google AJAX API와 Google 시각화 controls 패키지라는 두 가지 라이브러리만 페이지에 포함하거나 로드하면 됩니다.
  3. 데이터를 준비합니다. 시각화할 데이터를 준비해야 합니다. 즉, 코드에서 직접 데이터를 지정하거나 원격 사이트에서 데이터를 쿼리해야 합니다.
  4. 대시보드 인스턴스를 만듭니다. 생성자를 호출하고 포함할 <div> 요소 참조를 전달하여 대시보드를 인스턴스화합니다.
  5. 제어 및 차트 인스턴스를 필요한 만큼 만듭니다. google.visualization.ChartWrapper 및 google.visualization.ControlWrapper 인스턴스를 만들어 대시보드에서 관리하는 각 차트를 설명하고 제어합니다.
  6. 종속 항목을 설정합니다. 대시보드에서 bind()을 호출하고 제어 및 차트 인스턴스를 전달하여 대시보드에 관리할 항목을 알립니다. 컨트롤과 차트가 함께 결합되면 대시보드는 컨트롤이 데이터에 적용하는 제약조건과 일치하도록 차트를 업데이트합니다.
  7. 대시보드를 그립니다. 대시보드에서 draw()을 호출하고 데이터를 전달하여 페이지의 전체 대시보드를 그립니다.
  8. 그리기 후 프로그래매틱 방식 변경사항. 원하는 경우 최초 그리기 후 대시보드의 일부인 컨트롤을 프로그래매틱 방식으로 구동하고 대시보드에 이에 응답하여 차트를 업데이트하도록 할 수 있습니다.

다음은 원형 차트를 구동하는 범위 슬라이더로 간단한 대시보드를 만드는 페이지의 간단한 예입니다. 결과 대시보드가 스니펫 아래에 표시됩니다. 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

이 코드가 만드는 대시보드는 다음과 같습니다.

1. 대시보드용 HTML 스켈레톤 생성

대시보드 자체와 모든 컨트롤 및 차트를 모두 보유하는 페이지에는 최대한 많은 HTML 요소 (일반적으로 <div>)가 있어야 합니다. 대시보드, 컨트롤, 차트 인스턴스를 인스턴스화할 때 요소에 대한 참조를 전달해야 하므로 각 HTML 요소에 ID를 할당합니다. 

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

대시보드에서 원하는 HTML 요소를 자유롭게 배치할 수 있습니다.

2. 라이브러리 로드

대시보드를 사용하려면 Google AJAX API와 Google 시각화 controls 패키지라는 두 가지 라이브러리만 페이지에 포함하거나 로드하면 됩니다. API (특히 google.visualization.ChartWrapper)는 필요한 다른 패키지를 자동으로 식별하며 (예: 게이지 차트를 사용하는 경우 gauge) 추가 개입 없이 즉시 로드합니다.

google.charts.load()를 사용하여 제어 라이브러리를 가져와야 합니다.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. 데이터 준비

시각화 API가 로드되면 google.charts.setOnLoadCallback()가 핸들러 함수를 호출하므로 필요한 모든 도우미 메서드와 클래스가 데이터 준비를 시작할 준비가 된 것을 알 수 있습니다.

대시보드는 차트와 마찬가지로 DataTable의 데이터를 허용합니다.

4. 대시보드 인스턴스 만들기

데이터를 만든 후에는 대시보드 객체를 인스턴스화할 수 있습니다. 대시보드 생성자는 한 개의 매개변수, 즉 대시보드를 그릴 DOM 요소에 대한 참조를 사용합니다. 

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

대시보드는 자바스크립트 클래스로 노출됩니다. 대시보드를 인스턴스화한 후 이벤트 리스너 추가와 같은 몇 가지 선택적 단계를 실행할 수 있습니다 (예: 대시보드가 '준비됨' 상태가 되면 알림을 받음). 대시보드는 차트와 동일한 방식으로 이벤트를 처리하므로 자세한 내용은 차트 섹션의 시각화 이벤트 처리 또는 오류 없이 표시를 참조하세요.

5. 컨트롤 생성 및 인스턴스 차트 작성

대시보드에 포함될 각 컨트롤과 차트에 필요한 인스턴스 수를 정의합니다. google.visualization.ChartWrapper 및 google.visualization.ControlWrapper를 사용하여 각각 차트와 컨트롤을 정의합니다. 

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

ChartWrapper 및 ControlWrapper 인스턴스를 만들 때 dataTable 또는 dataSourceUrl 매개변수를 지정하지 마세요. 이 대시보드는 각각에 적절한 데이터를 제공하는 역할을 합니다. 그러나 필수 매개변수(차트의 경우 chartType 및 containerId, 컨트롤의 경우 controlType 및 containerId)를 지정해야 합니다.

컨트롤 및 차트 구성에 대한 몇 가지 팁:

  • 모든 컨트롤에 filterColumnIndex(또는 filterColumnLabel) 컨트롤을 사용할 수 있는 google.visualization.DataTable 열을 지정해야 합니다 (위 예에서 컨트롤은 Donuts Foods).

  • 컨트롤에 state 구성 옵션을 사용하여 컨트롤을 처음 그릴 때 명시적인 상태로 초기화합니다. 예를 들어 이 설정을 사용하여 범위 슬라이더 컨트롤의 thumb의 초기 위치를 고정할 수 있습니다. 

      var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'minValue': 1,
      'maxValue': 10
    },
    // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 3, 'highValue': 8}
  });

  • 대시보드에 속한 모든 차트는 데이터 준비 단계에서 준비한 동일한 기본 dataTable을 공유합니다. 그러나 차트를 올바르게 표시하려면 특정한 열 정렬이 필요합니다. 예를 들어 원형 차트에는 라벨의 문자열 열과 그 뒤에 숫자 열이 필요합니다.

    다음 예와 같이 각 ChartWrapper 인스턴스를 구성하는 동안 view 옵션을 사용하여 차트와 관련된 열을 선언합니다. 

      var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8]
  ]);

  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'title': 'Donuts eaten per person'
    },
    // The pie chart will use the columns 'Name' and 'Donuts eaten'
    // out of all the available ones.
    'view': {'columns': [0, 3]}
  });

  // The rest of dashboard configuration follows
  // ...

6. 종속 항목 설정

대시보드와 여기에 포함될 모든 컨트롤 및 차트를 모두 인스턴스화한 후 bind() 메서드를 사용하여 컨트롤과 차트 사이에 존재하는 종속 항목에 관해 대시보드에 알립니다.

컨트롤과 차트가 함께 결합되면 대시보드는 컨트롤이 데이터에 적용하는 제약조건과 일치하도록 차트를 업데이트합니다. 만들고 있는 예시 대시보드에서는 범위 슬라이더와 원형 차트가 결합되어 있으므로, 전자와 상호작용할 때마다 선택한 범위와 일치하는 데이터만 표시됩니다. 

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

일대일, 일대다, 다대다 등 다양한 구성을 사용하여 컨트롤과 차트를 결합할 수 있습니다. 여러 컨트롤이 차트에 바인딩될 때마다 대시보드는 결합된 모든 컨트롤에 의해 적용되는 결합된 제약조건에 맞게 차트를 업데이트합니다. 동시에 컨트롤은 여러 차트를 동시에 구동할 수 있습니다. 여러 결합을 동시에 지정하려면 단일 인스턴스 대신 bind() 메서드에 배열을 전달합니다. 여러 bind() 호출을 함께 연결할 수도 있습니다. 다음은 몇 가지 예입니다. 

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

고급 사용의 경우 컨트롤을 다른 컨트롤에 바인딩하여 종속 항목 체인 를 설정할 수도 있습니다. 

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. 대시보드 그리기

대시보드 인스턴스에서 draw() 메서드를 호출하여 전체 대시보드를 렌더링합니다. draw() 메서드는 대시보드를 지원하는 DataTable(또는 DataView) 매개변수 하나만 사용합니다.

대시보드의 구성을 변경할 때(예: 대시보드에 새 컨트롤 또는 차트를 추가) 또는 이를 구동하는 전체 DataTable를 변경할 때마다 draw()를 호출해야 합니다.

대시보드 인스턴스는 draw()이 그 컨트롤에 속한 모든 컨트롤 및 차트 그리기를 종료할 때마다 ready 이벤트를 실행합니다. 관리 컨트롤 또는 차트 중 하나가 그려지지 않으면 error 이벤트가 실행됩니다. 이벤트 처리에 관한 자세한 내용은 이벤트 처리를 참고하세요.

참고: 대시보드 구성을 변경하거나 다시 그리려면 먼저 ready 이벤트를 수신 대기해야 합니다.

8. 그리기 후 프로그래매틱 변경사항

대시보드에서 초기 draw()를 완료하면 라이브 상태가 되고, 실행한 작업 (예: 대시보드의 일부인 제어 슬라이더의 선택된 범위 변경)에 자동으로 응답합니다.

대시보드 상태를 프로그래매틱 방식으로 변경해야 하는 경우 대시보드의 일부인 ControlWrapper 및 ChartWrapper 인스턴스에서 직접 실행하여 대시보드 상태를 변경할 수 있습니다. 일반적으로 특정 ControlWrapper(또는 ChartWrapper) 인스턴스에서 직접 필요한 변경을 실행합니다. 예를 들어 setOption() 및 setState()를 통해 각각 제어 옵션이나 상태를 변경한 후 draw() 메서드를 호출합니다. 그러면 대시보드가 요청된 변경사항과 일치하도록 업데이트됩니다.

다음 예는 이러한 사례를 보여줍니다.
전체 웹페이지
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

API 참조

이 섹션에는 Controls 및 Dashboards API에 의해 노출된 객체와 모든 컨트롤에 의해 노출된 표준 메서드가 나와 있습니다.

대시보드

동일한 기본 데이터를 공유하는 공동작업 컨트롤 및 차트 컬렉션을 나타냅니다.

생성자

Dashboard(containerRef)
containerRef
대시보드 콘텐츠를 보유할 페이지의 유효한 컨테이너 요소에 대한 참조입니다.

방법

대시보드에는 다음 메서드가 표시됩니다.

메서드 반환 유형 설명
bind(controls, charts) google.visualization.대시보드

하나 이상의 컨트롤을 하나 이상의 다른 대시보드 참여자 (차트 또는 다른 컨트롤)에 바인딩합니다. 바인드는 대시보드에서 관리하는 데이터에 영향을 주는 프로그래매틱 또는 사용자 상호작용을 수집할 때마다 후자를 모두 다시 그립니다. 여러 bind() 호출을 함께 연결하기 위한 대시보드 인스턴스 자체를 반환합니다.

  • controls - 바인딩할 컨트롤을 정의하는 단일 인스턴스 또는 google.visualization.ControlWrapper 인스턴스의 배열.
  • 차트 - 컨트롤로 구동될 차트를 정의하는 단일 인스턴스 또는 google.visualization.ChartWrapper 인스턴스의 배열입니다.
draw(dataTable) 없음

대시보드를 그립니다.
getSelection() 객체의 배열

대시보드에서 차트의 선택된 시각적 항목 배열을 반환합니다. getSelection() 메서드는 대시보드에서 호출할 때 모든 차트에서 선택된 모든 항목의 집계를 반환하므로 차트 선택 작업 시 단일 참조를 사용할 수 있습니다.

참고: 선택한 이벤트의 이벤트 리스너는 리슨하려는 각 차트에 계속 연결되어야 합니다.

확장된 설명

이벤트

대시보드 객체는 다음과 같은 이벤트를 발생시킵니다. 이벤트가 발생하기 전에 Dashboard.draw()를 호출해야 합니다.

이름 설명 속성
error 대시보드를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. 대시보드의 일부인 컨트롤 및 차트 중 하나 이상이 렌더링에 실패했을 수 있습니다. ID, 메시지
ready

대시보드에 그리기가 완료되어 변경사항을 수락할 준비가 되었습니다. 대시보드의 일부인 모든 컨트롤 및 차트는 외부 메서드 호출 및 사용자 상호작용을 사용할 수 있습니다. 대시보드를 그리는 후 대시보드 (또는 대시보드에 표시되는 데이터)를 변경하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정한 후 이벤트가 시작된 후에만 변경사항을 적용해야 합니다.

ready 이벤트도 실행됩니다.

  • 사용자 또는 프로그래매틱 컨트롤과 상호작용하여 트리거된 대시보드 새로고침이 완료되면
  • 대시보드의 차트 부분에 있는 draw() 메서드를 프로그래매틱 방식으로 호출한 후
없음

ControlWrapper 클래스의 생성자

ControlWrapper 객체는 구성된 제어 인스턴스의 JSON 표현을 둘러싸는 래퍼입니다. 이 클래스는 대시보드 컨트롤을 정의하고, 그리고 그리고 프로그래매틱 방식으로 상태를 변경하기 위한 편의 메서드를 노출합니다.

생성자

ControlWrapper(opt_spec)
opt_spec
[선택사항] - 컨트롤을 정의하는 JSON 객체 또는 해당 객체의 직렬화된 문자열 버전입니다. 다음 표에는 JSON 객체의 지원되는 속성이 나와 있습니다. 지정하지 않으면 ControlWrapper에서 노출된 set... 메서드를 사용하여 적절한 속성을 모두 설정해야 합니다.
속성 유형 필수 기본 설명
컨트롤 유형 문자열 필수 없음 컨트롤의 클래스 이름입니다. Google 컨트롤의 경우 google.visualization 패키지 이름을 생략할 수 있습니다. 예: CategoryFilter, NumberRangeFilter
containerId 문자열 필수 없음 컨트롤을 호스팅할 페이지의 DOM 요소 ID입니다.
옵션 객체 선택사항 없음 컨트롤 옵션을 설명하는 객체입니다. 자바스크립트 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다. 예: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state 객체 선택사항 없음 컨트롤의 상태를 설명하는 객체입니다. 상태는 컨트롤을 제어하는 사용자가 영향을 미칠 수 있는 모든 변수를 수집합니다. 예를 들어 범위 슬라이더 상태는 슬라이더의 낮음 및 높음 지점이 차지하는 위치 측면에서 설명할 수 있습니다. 자바스크립트 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다.예:"state": {"lowValue": 20, "highValue": 50}

방법

ControlWrapper는 다음과 같은 추가 메서드를 노출합니다.

메서드 반환 유형 설명
draw() 없음

컨트롤을 그립니다. 일반적으로 컨트롤이 있는 대시보드에서 그려집니다. 옵션이나 상태와 같은 다른 설정을 변경한 후에는 draw()를 호출하여 프로그래매틱 방식으로 컨트롤을 강제로 다시 그립니다.

toJSON() 문자열 컨트롤의 JSON 표현의 문자열 버전을 반환합니다.
clone() ControlWrapper 컨트롤 래퍼의 딥 카피를 반환합니다.
getControlType() 문자열 컨트롤의 클래스 이름입니다. Google 컨트롤이라면 이름이 google.visualization로 한정되지 않습니다. 예를 들어 카테고리 필터 컨트롤이라면 'google.visualization.CategoryFilter'가 아닌 '카테고리 필터'를 반환합니다.
getControlName() 문자열 setControlName()에서 할당한 컨트롤 이름을 반환합니다.
getControl() 제어 객체 참조 이 ControlWrapper로 만든 컨트롤에 대한 참조를 반환합니다. 이렇게 하면 ControlWrapper 객체 (또는 이 객체를 보유한 대시보드)에서 draw()를 호출한 후 준비된 이벤트가 발생할 때까지 null이 반환됩니다. 반환된 객체는 한 가지 메서드 (resetControl())만 노출합니다. 이 메서드는 HTML 양식 요소를 재설정하는 등 컨트롤 상태를 초기화된 상태로 재설정합니다.
getContainerId() 문자열 컨트롤의 DOM 컨테이너 요소 ID입니다.
getOption(key, opt_default_val) 모든 유형

지정된 컨트롤 옵션 값을 반환합니다.

  • 키 - 검색할 옵션의 이름입니다. 정규화된 이름일 수 있습니다(예: 'vAxis.title').
  • opt_default_value[선택] - 지정된 값이 정의되지 않았거나 null이면 이 값이 반환됩니다.
getOptions() 객체 이 컨트롤의 옵션 객체를 반환합니다.
getState() 객체 컨트롤 상태를 반환합니다.
setControlType(type) 없음 컨트롤 유형을 설정합니다. 인스턴스화할 컨트롤의 클래스 이름을 전달합니다. Google 컨트롤이라면 google.visualization로 자격이 주어지지 않습니다. 예를 들어 숫자 열 위의 범위 슬라이더에 'NumberRangeFilter'를 전달합니다.
setControlName(name) 없음 컨트롤의 임의 이름을 설정합니다. 컨트롤의 어느 부분에도 표시되지 않지만 참고용으로만 표시됩니다.
setContainerId(id) 없음 컨트롤에 포함된 DOM 요소의 ID를 설정합니다.
setOption(key, value) 없음 단일 컨트롤 옵션 값을 설정합니다. 여기서 key는 옵션 이름이고 value는 값입니다. 옵션을 설정 해제하려면 값에 null을 전달합니다. key는 정규화된 이름(예: 'vAxis.title')일 수 있습니다.
setOptions(options_obj) 없음 컨트롤의 전체 옵션 객체를 설정합니다.
setState(state_obj) 없음 컨트롤 상태를 설정합니다. 상태는 컨트롤을 운영하는 사용자가 영향을 미칠 수 있는 모든 변수를 수집합니다. 예를 들어 범위 슬라이더 상태는 슬라이더의 낮음 및 높음 지점이 차지하는 위치 측면에서 설명할 수 있습니다.

이벤트

ControlWrapper 객체에서 다음 이벤트가 발생합니다. 이벤트가 발생하기 전에 ControlWrapper.draw()를 호출하거나 제어 기능이 있는 대시보드를 그려야 합니다.

이름 설명 속성
error 컨트롤을 렌더링하려고 할 때 오류가 발생하면 발생됩니다. ID, 메시지
ready 이 컨트롤을 사용자 상호작용 및 외부 메서드 호출에 사용할 수 있습니다. 컨트롤과 상호작용하고 컨트롤을 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 또는 이벤트가 발생한 후에만 컨트롤과 호출 컨트롤 메서드를 보유하는 대시보드에서 ready 이벤트를 수신 대기할 수 있습니다. 없음
statechange 사용자가 컨트롤과 상호작용하여 상태에 영향을 미치면 실행됩니다. 예를 들어 범위 슬라이더 컨트롤의 thumb을 이동할 때마다 statechange 이벤트가 발생합니다. 이벤트가 발생한 후 업데이트된 제어 상태를 검색하려면 ControlWrapper.getState()를 호출합니다. 없음

차트 래퍼

시각화의 API 참조 섹션에서 google.visualization.ChartWrapper 문서를 참조하세요.

ChartWrapper는 대시보드의 일부로 사용할 때 적용됩니다.

  • dataTable, query, dataSourceUrl, refreshInterval 속성을 명시적으로 설정하지 마세요. 차트를 포함하는 대시보드에서는 필요한 데이터를 제공합니다.
  • 컨트롤 및 차트 인스턴스 만들기에 나와 있는 것처럼, 대시보드에 있는 dataTable에 있는 모든 열 중에서 차트와 관련된 열을 선언하도록 view 속성을 설정합니다.

필터는 사용자가 차트에 표시되는 데이터를 대화형으로 선택하는 데 사용할 수 있는 그래픽 요소입니다. 이 섹션에서는 Google 차트 필터인 CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter, StringFilter에 관해 설명합니다.

둘 중 하나를 ControlWrapper.setControlType()의 매개변수로 사용할 수 있습니다.

참고: 옵션 설명에서 점 표기법은 중첩된 객체 속성을 설명하는 데 사용됩니다. 예를 들어 이름이 'ui.label'인 옵션은 옵션 객체에서 var options = {"ui": {"label": "someLabelValue"} };로 선언해야 합니다.

카테고리 필터

정의된 값 집합 중에서 하나 이상을 선택하는 선택 도구입니다.

상태

이름 유형 기본 설명
선택된 값 객체 또는 기본형 배열 없음 현재 선택된 값 집합입니다. 선택된 값은 values 옵션에서 정의한 선택 가능한 전체 값 집합이어야 합니다 (관련 없는 값은 무시됨). CategoryFilter가 객관식을 허용하지 않으면 배열의 첫 번째 값만 유지됩니다.

옵션

이름 유형 기본 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블의 열입니다. 이 옵션이나 filterColumnLabel을 반드시 제공해야 합니다. 둘 다 있는 경우 이 옵션이 우선 적용됩니다.
filterColumnLabel 문자열 없음 필터가 작동하는 열의 라벨입니다. 이 옵션이나 filterColumnIndex을 반드시 제공해야 합니다. 둘 다 있는 경우 filterColumnIndex가 우선 적용됩니다.
값 배열 자동 선택할 값의 목록입니다. 객체 배열이 사용되는 경우 사용자에게 표시하기에 적합한 toString() 표현이 있어야 합니다. null이거나 정의되지 않은 경우 이 컨트롤이 작동하는 DataTable 열에 있는 값에서 값 목록이 자동으로 계산됩니다.
useFormattedValue 사용 boolean false 선택 가능한 값 목록을 DataTable 열에서 자동으로 채우면 실제 셀 값 또는 형식 지정 값 중 무엇을 사용하든 이 필터가 작동합니다.
ui 객체 null 컨트롤의 다양한 요소를 구성하는 요소가 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{label: 'Metric', labelSeparator: ':'}
ui.caption 문자열 '값 선택...' 항목을 선택하지 않은 경우 값 선택 도구 위젯 내에 표시할 자막입니다.
ui.sortValues boolean true 선택할 값을 정렬해야 하는지 여부입니다.
ui.SelectedValuesLayout 문자열 '사이드' 여러 값을 선택할 수 있는 경우 선택한 값을 표시하는 방법 가능한 값은 다음과 같습니다.
  • 'aside': 선택한 값이 값 선택 도구 위젯 옆에 있는 단일 텍스트 줄에 표시됩니다.
  • 'below': 선택한 값이 위젯 아래의 단일 텍스트 줄에 표시됩니다.
  • 'belowWrapping': below와 유사하지만 선택 도구에 맞지 않는 항목은 새 줄로 래핑됩니다.
  • 'belowStacked': 선택한 값이 위젯 아래의 열에 표시됩니다.
ui.allowNone boolean true 사용자가 값을 선택할 수 있는지 여부입니다. false인 경우 사용자는 사용 가능한 값 중에서 하나 이상의 값을 선택해야 합니다. 제어 초기화 중에 이 옵션이 false로 설정되고 selectedValues 상태가 지정되지 않으면 사용 가능한 값의 첫 번째 값이 자동으로 선택됩니다.
ui.allowMultiple boolean true 하나만이 아니라 여러 값을 선택할 수 있는지를 나타냅니다.
ui.allowTyping boolean true 사용자가 자동 완성기를 통해 가능한 선택 목록의 범위를 좁히기 위해 텍스트 필드에 입력할 수 있는지 여부입니다.
ui.label 문자열 자동 카테고리 선택 도구 옆에 표시할 라벨입니다. 지정하지 않으면 컨트롤이 작동하는 열의 라벨이 사용됩니다.
ui.labelSeparator 문자열 없음 라벨에 추가된 구분 기호 문자열로, 라벨을 카테고리 선택 도구와 시각적으로 분리합니다.
ui.labelStacking 문자열 '수평' 라벨이 카테고리 선택 도구 위에 표시되어야 하는지 (세로 스택) 또는 옆에 표시 (가로 스택)되는지 여부입니다. 'vertical' 또는 'horizontal'를 사용하세요.
ui.css 클래스 문자열 'google-visualization-controls-categoryfilter' 맞춤 스타일을 지정하기 위해 컨트롤에 할당할 CSS 클래스입니다.

차트 범위 필터

차트에 엄지손가락 두 개를 겹쳐서 차트의 연속 축에서 값 범위를 선택합니다.

상태

이름 유형 기본 설명
범위.시작 숫자, 날짜, 날짜/시간 또는 시간 범위 시작 값 선택한 범위의 시작 부분(해당 값 포함)입니다.
범위.end 숫자, 날짜, 날짜/시간 또는 시간 범위 종료 값 선택한 범위의 끝입니다(해당 값 포함).

옵션

이름 유형 기본 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블에 있는 열의 색인입니다. 이 옵션이나 filterColumnLabel을 반드시 제공해야 합니다. 둘 다 있는 경우 이 옵션이 우선 적용됩니다.

컨트롤에 그려진 차트의 연속 축에 포함된 domain 열의 색인만 지정하는 것이 좋습니다.

filterColumnLabel 문자열 없음 필터가 작동하는 데이터 표의 열 라벨입니다. 이 옵션이나 filterColumnIndex을 반드시 제공해야 합니다. 둘 다 있는 경우 filterColumnIndex가 우선 적용됩니다.

컨트롤에 그려진 차트의 연속 축에 포함된 domain 열의 라벨만 지정하는 것이 좋습니다.

ui 객체 null 컨트롤의 다양한 요소를 구성하는 요소가 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType 문자열 '콤보 차트' 컨트롤 내에 그려진 차트의 유형입니다.
'AreaChart', 'LineChart', 'ComboChart' 또는 'ScatterChart' 중 하나일 수 있습니다.
ui.chartOptions 객체 
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
컨트롤 내에 그려진 차트의 구성 옵션입니다. 대시보드의 차트와 동일한 수준의 구성을 허용하고 ChartWrapper.setOptions()에서 허용하는 형식과 동일한 형식을 준수합니다.

추가 옵션을 지정하거나 기본 옵션을 재정의할 수 있습니다. 하지만 최적의 모양을 위해 기본값이 신중하게 선택되었습니다.

ui.chartView 객체 또는 문자열 (직렬화된 객체) null 컨트롤 내에서 차트를 그리는 데 사용되는 데이터 테이블에 적용할 뷰의 사양입니다. 대시보드의 차트와 동일한 수준의 구성을 허용하고 ChartWrapper.setView()에서 허용하는 것과 동일한 형식을 준수합니다. 지정하지 않으면 차트를 그리는 데 데이터 표 자체가 사용됩니다.

그려진 차트의 가로축은 연속이어야 하므로 이에 맞게 ui.chartView를 지정해야 합니다.

ui.minRangeSize 숫자 1픽셀로 해석된 데이터 값 차이 선택 가능한 최소 범위 크기(range.end - range.start)로, 데이터 값 단위로 지정됩니다. 숫자 축은 숫자이며 반드시 정수일 필요는 없습니다. 날짜, 날짜/시간 또는 timeofday 축의 경우 밀리초 단위의 차이를 지정하는 정수입니다.
ui.snapToData boolean false true인 경우 범위 엄지손가락이 가장 가까운 데이터 포인트에 맞춰집니다. 이 경우 getState()에서 반환하는 범위의 끝점은 반드시 데이터 테이블의 값입니다.

이벤트

ControlWrapper 이벤트에 추가된 사항:

이름 설명 속성
statechange 모든 ControlWrapper에 문서화된 것과 마찬가지로 상태가 현재 변경 중인지(thumb 중 하나 또는 범위 자체가 드래그되고 있는지) 여부를 지정하는 추가 부울 속성 inProgress만 있습니다. 진행 중

기간 필터

날짜 범위를 선택하는 이중 값 슬라이더

슬라이더를 이동하여 아래 표에 표시되는 행을 변경해 보세요.

상태

이름 유형 기본 설명
낮은 가치 숫자 없음 선택한 범위의 하한(포함)입니다.
높은 가치 숫자 없음 선택한 범위의 상한입니다(해당 값 포함).
최소 ThumbAt boolean 없음 슬라이더의 엄지손가락이 허용된 최소 범위로 잠겨 있는지 여부 이 속성을 설정하면 lowValue가 재정의됩니다.
최고 높음 위치 boolean 없음 슬라이더의 상위 지점이 최대 허용 범위에서 잠겨 있는지 여부입니다. 이 속성을 설정하면 highValue가 재정의됩니다.

옵션

이름 유형 기본 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블의 열입니다. 이 옵션이나 filterColumnLabel을 반드시 제공해야 합니다. 둘 다 있는 경우 이 옵션이 우선 적용됩니다. 유형이 number인 열을 가리켜야 합니다.
filterColumnLabel 문자열 없음 필터가 작동하는 열의 라벨입니다. 이 옵션이나 filterColumnIndex을 반드시 제공해야 합니다. 둘 다 있는 경우 filterColumnIndex가 우선 적용됩니다. 유형이 number인 열을 가리켜야 합니다.
minValue 날짜 자동 범위에 대한 최소 허용 값입니다. 정의되지 않은 경우 컨트롤에서 관리하는 DataTable의 콘텐츠에서 값이 추론됩니다.
maxValue 날짜 자동 범위에 대한 최대 허용 값입니다. 정의되지 않은 경우 컨트롤에서 관리하는 DataTable의 콘텐츠에서 값이 추론됩니다.
ui 객체 null 컨트롤의 다양한 요소를 구성하는 요소가 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{label: 'Age', labelSeparator: ':'}
UI 형식 객체 없음 날짜를 문자열로 나타내는 방법 유효한 날짜 형식이 허용됩니다.
ui.step 문자열 일 슬라이더의 thumb을 드래그할 때 가능한 최소 변경사항: 'day'까지 시간 단위일 수 있습니다. ('월' 및 '연도'는 아직 지원되지 않습니다.)
ui.ticks 숫자 자동 슬라이더에 표시되는 틱 수 (범위 표시줄의 고정된 위치)입니다.
ui.unitIncrement 문자열 '1' 범위 범위의 단위 증분에 대해 증분되는 금액입니다. 단위 증가는 화살표 키를 사용하여 슬라이더 썸을 이동하는 것과 같습니다.
ui.blockIncrement 숫자 10 범위 확장 단위의 블록 단위로 증가하는 값입니다. 블록 증가는 pgUp 및 pgDown 키를 사용하여 슬라이더 썸을 이동하는 것과 같습니다.
ui.showRangeValues boolean true 슬라이더 옆에 선택한 범위의 범위를 표시하는 라벨을 표시할지 여부입니다.
ui.orientation 문자열 '수평' 슬라이더 방향입니다. 'horizontal' 또는 'vertical'.
ui.label 문자열 자동 슬라이더 옆에 표시할 라벨입니다. 지정하지 않으면 컨트롤이 작동하는 열의 라벨이 사용됩니다.
ui.labelSeparator 문자열 없음 라벨에 추가된 구분자 문자열로, 슬라이더를 슬라이더에서 시각적으로 분리합니다.
ui.labelStacking 문자열 '수평' 라벨을 슬라이더 위에 표시해야 하는지 (세로 스태킹) 또는 슬라이더 옆에 표시 (가로 스태킹)합니다. 'vertical' 또는 'horizontal'를 사용하세요.
ui.css 클래스 문자열 'google-visualization-controls-rangefilter' 맞춤 스타일을 지정하기 위해 컨트롤에 할당할 CSS 클래스입니다.

숫자 범위 필터

숫자 값의 범위를 선택하기 위한 이중 값 슬라이더입니다.

상태

이름 유형 기본 설명
낮은 가치 숫자 없음 선택한 범위의 하한(포함)입니다.
높은 가치 숫자 없음 선택한 범위의 상한입니다(해당 값 포함).
최소 ThumbAt boolean 없음 슬라이더의 엄지손가락이 허용된 최소 범위로 잠겨 있는지 여부 이 속성을 설정하면 lowValue가 재정의됩니다.
최고 높음 위치 boolean 없음 슬라이더의 상위 지점이 최대 허용 범위에서 잠겨 있는지 여부입니다. 이 속성을 설정하면 highValue가 재정의됩니다.

옵션

이름 유형 기본 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블의 열입니다. 이 옵션이나 filterColumnLabel을 반드시 제공해야 합니다. 둘 다 있는 경우 이 옵션이 우선 적용됩니다. 유형이 number인 열을 가리켜야 합니다.
filterColumnLabel 문자열 없음 필터가 작동하는 열의 라벨입니다. 이 옵션이나 filterColumnIndex을 반드시 제공해야 합니다. 둘 다 있는 경우 filterColumnIndex가 우선 적용됩니다. 유형이 number인 열을 가리켜야 합니다.
minValue 숫자 자동 범위에 대한 최소 허용 값입니다. 정의되지 않은 경우 컨트롤에서 관리하는 DataTable의 콘텐츠에서 값이 추론됩니다.
maxValue 숫자 자동 범위에 대한 최대 허용 값입니다. 정의되지 않은 경우 컨트롤에서 관리하는 DataTable의 콘텐츠에서 값이 추론됩니다.
ui 객체 null 컨트롤의 다양한 요소를 구성하는 요소가 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{label: 'Age', labelSeparator: ':'}
UI 형식 객체 없음 숫자를 문자열로 나타내는 방법 유효한 숫자 형식이 허용됩니다.
ui.step 숫자 1 또는 정의된 경우 ticks에서 계산 슬라이더 썸을 드래그할 때 가능한 최소 변경사항입니다.
ui.ticks 숫자 자동 슬라이더에 표시되는 틱 수 (범위 표시줄의 고정된 위치)입니다.
ui.unitIncrement 숫자 1 범위 범위의 단위 증분에 대해 증분되는 금액입니다. 단위 증가는 화살표 키를 사용하여 슬라이더 썸을 이동하는 것과 같습니다.
ui.blockIncrement 숫자 10 범위 확장 단위의 블록 단위로 증가하는 값입니다. 블록 증가는 pgUp 및 pgDown 키를 사용하여 슬라이더 썸을 이동하는 것과 같습니다.
ui.showRangeValues boolean true 슬라이더 옆에 선택한 범위의 범위를 표시하는 라벨을 표시할지 여부입니다.
ui.orientation 문자열 '수평' 슬라이더 방향입니다. 'horizontal' 또는 'vertical'.
ui.label 문자열 자동 슬라이더 옆에 표시할 라벨입니다. 지정하지 않으면 컨트롤이 작동하는 열의 라벨이 사용됩니다.
ui.labelSeparator 문자열 없음 라벨에 추가된 구분자 문자열로, 슬라이더를 슬라이더에서 시각적으로 분리합니다.
ui.labelStacking 문자열 '수평' 라벨을 슬라이더 위에 표시해야 하는지 (세로 스태킹) 또는 슬라이더 옆에 표시 (가로 스태킹)합니다. 'vertical' 또는 'horizontal'를 사용하세요.
ui.css 클래스 문자열 'google-visualization-controls-rangefilter' 맞춤 스타일을 지정하기 위해 컨트롤에 할당할 CSS 클래스입니다.

문자열 필터

문자열 일치를 통해 데이터를 필터링할 수 있는 간단한 텍스트 입력란입니다. 키를 한 번 누를 때마다 업데이트됩니다. j을 입력하여 존과 제시카로 아래 표의 범위를 좁혀 보세요.

상태

이름 유형 기본 설명
값 문자열 또는 객체 없음 컨트롤 입력란에 현재 입력된 텍스트입니다.

옵션

이름 유형 기본 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블의 열입니다. 이 옵션이나 filterColumnLabel을 반드시 제공해야 합니다. 둘 다 있는 경우 이 옵션이 우선 적용됩니다.
filterColumnLabel 문자열 없음 필터가 작동하는 열의 라벨입니다. 이 옵션이나 filterColumnIndex을 반드시 제공해야 합니다. 둘 다 있는 경우 filterColumnIndex가 우선 적용됩니다.
검색 유형 문자열 'prefix' 컨트롤이 정확히 일치하는 값만 ('exact'), 값의 시작 부분 ('prefix') 또는 하위 문자열 ('any')부터 시작하는 프리픽스를 매칭해야 하는지 여부입니다.
대소문자 구분 boolean false 일치 여부를 대소문자를 구분해야 하는지 여부입니다.
useFormattedValue 사용 boolean false 컨트롤을 셀 서식 값과 일치시킬지 아니면 실제 값에 다시 적용할지 여부입니다.
ui 객체 null 컨트롤의 다양한 요소를 구성하는 요소가 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger boolean true 컨트롤을 누를 때마다 또는 입력 필드가 '변경'될 때만 컨트롤의 일치 여부입니다(포커스 상실 또는 Enter 키 누르기).
ui.label 문자열 자동 입력란 옆에 표시할 라벨입니다. 지정하지 않으면 컨트롤이 작동하는 열의 라벨이 사용됩니다.
ui.labelSeparator 문자열 없음 라벨에 시각적으로 추가된 구분기호 문자열로, 라벨을 입력란과 시각적으로 구분합니다.
ui.labelStacking 문자열 '수평' 라벨이 입력란 위에 표시되어야 하는지 (세로 스택) 또는 옆에 표시 (수평 스택)하는지 여부. 'vertical' 또는 'horizontal'를 사용하세요.
ui.css 클래스 문자열 'google-visualization-controls-stringfilter' 맞춤 스타일을 지정하기 위해 컨트롤에 할당할 CSS 클래스입니다.