컨트롤 및 대시보드

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

개요

대시보드를 사용하면 동일한 기본 데이터를 공유하는 여러 차트를 함께 구성하고 관리할 수 있습니다. 이 페이지에 설명된 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'));

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

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의 열을 지정해야 합니다 (위의 예에서는 도넛 먹은 라벨이 지정된 열에서 컨트롤이 작동함).

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

      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을 공유합니다. 하지만 차트에서 올바르게 표시하려면 특정 열 배열이 필요한 경우가 많습니다. 예를 들어 원형 차트에서는 라벨에 문자열 열과 값에 이어 숫자 열이 있어야 합니다.

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

      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 and Dashboards API에서 노출된 객체와 모든 컨트롤에서 노출된 표준 메서드가 나와 있습니다.

대시보드

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

생성자

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

방법

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

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

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

  • controls - 바인딩할 컨트롤을 정의하는 google.visualization.ControlWrapper 인스턴스의 배열이나 단일 인스턴스입니다.
  • charts - 단일 하나 또는 차트를 정의하는 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... 메서드를 사용하여 적절한 속성을 모두 설정해야 합니다.
속성 유형 필수 기본값 설명
controlType 문자열 필수 없음 컨트롤의 클래스 이름입니다. Google 컨트롤에서는 google.visualization 패키지 이름을 생략할 수 있습니다. 예: CategoryFilter, NumberRangeFilter
containerId 문자열 필수 없음 컨트롤을 호스팅할 페이지에서 DOM 요소의 ID입니다.
옵션 객체 선택사항 없음 컨트롤의 옵션을 설명하는 객체입니다. JavaScript 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다. 예: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state 객체 선택사항 없음 컨트롤의 상태를 설명하는 객체입니다. 상태는 컨트롤을 작동하는 사용자가 영향을 줄 수 있는 모든 변수를 수집합니다. 예를 들어 범위 슬라이더 상태는 슬라이더의 낮은 thumb과 높은 thumb이 차지하는 위치로 설명할 수 있습니다. JavaScript 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다.예: "state": {"lowValue": 20, "highValue": 50}

방법

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

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

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

toJSON() 문자열 컨트롤의 JSON 표현의 문자열 버전을 반환합니다.
clone() ControlWrapper 제어 래퍼의 전체 사본을 반환합니다.
getControlType() 문자열 컨트롤의 클래스 이름입니다. Google 컨트롤인 경우 이름은 google.visualization로 정규화되지 않습니다. 예를 들어 CategoryFilter 컨트롤인 경우 'google.visualization.CategoryFilter' 대신 'CategoryFilter'를 반환합니다.
getControlName() 문자열 setControlName()에서 할당한 컨트롤 이름을 반환합니다.
getControl() 컨트롤 객체 참조 이 ControlWrapper에 의해 생성된 컨트롤에 대한 참조를 반환합니다. 그러면 ControlWrapper 객체 (또는 이 객체를 보유한 대시보드)에서 draw()를 호출할 때까지 null이 반환되고 준비 이벤트가 발생합니다. 반환된 객체는 컨트롤 상태를 초기화된 상태로 재설정하는 resetControl() 메서드 하나만 노출합니다 (예: HTML 양식 요소 재설정).
getContainerId() 문자열 컨트롤의 DOM 컨테이너 요소의 ID입니다.
getOption(key, opt_default_val) 모든 유형

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

  • key - 검색할 옵션의 이름입니다. 정규화된 이름(예: '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 사용자가 컨트롤과 상호작용할 때 실행되어 상태에 영향을 미칩니다. 예를 들어 범위 슬라이더 컨트롤의 thumbs를 움직일 때마다 statechange 이벤트가 실행됩니다. 이벤트가 발생한 후 업데이트된 컨트롤 상태를 검색하려면 ControlWrapper.getState()를 호출하세요. 없음

ChartWrapper

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

ChartWrapper를 대시보드의 일부로 사용하는 경우 다음 사항이 적용됩니다.

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

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

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

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

CategoryFilter

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

상태

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

옵션

이름 유형 기본값 설명
filterColumnIndex 숫자 없음 필터가 작동해야 하는 데이터 테이블의 열입니다. 이 옵션 또는 filterColumnLabel를 제공해야 합니다. 둘 다 있으면 이 옵션이 우선합니다.
filterColumnLabel 문자열 없음 필터가 작동해야 하는 열의 라벨입니다. 이 옵션 또는 filterColumnIndex를 제공해야 합니다. 둘 다 있으면 filterColumnIndex가 우선 적용됩니다.
값 배열 자동 선택할 수 있는 값의 목록입니다. 객체 배열을 사용하는 경우 사용자에게 표시하기에 적합한 toString() 표현을 가져야 합니다. null이거나 정의되지 않은 경우 값 목록은 이 컨트롤이 작동하는 DataTable 열에 있는 값에서 자동으로 계산됩니다.
useFormattedValue boolean false 선택 가능한 값의 목록을 DataTable 열에서 자동으로 채울 때 이 필터가 작동하는 경우, 실제 셀 값을 사용할지, 아니면 형식이 지정된 값을 사용할지를 나타냅니다.
ui 객체 null 컨트롤 UI의 다양한 측면을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{label: 'Metric', labelSeparator: ':'}
ui.caption 문자열 '값을 선택하세요...' 선택된 항목이 없을 때 값 선택 도구 위젯에 표시할 캡션입니다.
ui.sortValues boolean true 선택할 값의 정렬 여부입니다.
ui.selectedValuesLayout 문자열 'aside' 다중 선택이 허용되는 경우 선택한 값을 표시하는 방법 가능한 값은 다음과 같습니다.
  • '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.cssClass 문자열 'google-visualization-controls-categoryfilter' 사용자 지정 스타일을 지정하기 위해 컨트롤에 할당할 CSS 클래스입니다.

ChartRangeFilter

차트의 연속 축에서 값 범위를 선택할 수 있도록 차트 위에 엄지손가락이 두 개 있는 슬라이더.

상태

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

옵션

이름 유형 기본값 설명
filterColumnIndex 숫자 없음 필터가 작동하는 데이터 테이블의 열 색인입니다. 이 옵션 또는 filterColumnLabel를 제공해야 합니다. 둘 다 있으면 이 옵션이 우선 적용됩니다.

컨트롤 내에 그려진 차트의 연속축에 포함된 domain 열의 색인을 지정하는 것은 의미가 있습니다.

filterColumnLabel 문자열 없음 필터가 작동하는 데이터 표의 열 라벨입니다. 이 옵션 또는 filterColumnIndex를 제공해야 합니다. 둘 다 있으면 filterColumnIndex가 우선 적용됩니다.

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

ui 객체 null 컨트롤 UI의 다양한 측면을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType 문자열 'ComboChart' 컨트롤 내부에 그려진 차트의 유형입니다.
'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인 경우 범위 thumb이 가장 가까운 데이터 포인트에 맞춰집니다. 이 경우 getState()에서 반환하는 범위의 끝점은 데이터 테이블의 값이어야 합니다.

이벤트

ControlWrapper 이벤트에 추가된 사항:

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

DateRangeFilter

날짜 범위를 선택하는 이중 값 슬라이더입니다.

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

상태

이름 유형 기본값 설명
lowValue 숫자 없음 선택한 범위의 하한 범위(해당 값 포함)입니다.
highValue 숫자 없음 선택한 범위의 범위(해당 값 포함)입니다.
lowThumbAtMinimum boolean 없음 슬라이더의 아래쪽 엄지손가락이 허용되는 최소 범위로 고정되는지 여부입니다. 이 매개변수를 설정하면 lowValue를 재정의합니다.
highThumbAtMaximum boolean 없음 슬라이더의 위쪽 엄지손가락이 최대 허용 범위에서 고정되는지 여부입니다. 이 매개변수를 설정하면 highValue를 재정의합니다.

옵션

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

NumberRangeFilter

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

상태

이름 유형 기본값 설명
lowValue 숫자 없음 선택한 범위의 하한 범위(해당 값 포함)입니다.
highValue 숫자 없음 선택한 범위의 범위(해당 값 포함)입니다.
lowThumbAtMinimum boolean 없음 슬라이더의 아래쪽 엄지손가락이 허용되는 최소 범위로 고정되는지 여부입니다. 이 매개변수를 설정하면 lowValue를 재정의합니다.
highThumbAtMaximum boolean 없음 슬라이더의 위쪽 엄지손가락이 최대 허용 범위에서 고정되는지 여부입니다. 이 매개변수를 설정하면 highValue를 재정의합니다.

옵션

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

StringFilter

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

상태

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

옵션

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