시각화: 모션 차트

개요

시간 경과에 따라 여러 지표를 탐색하는 동적 차트 차트는 Flash를 사용하여 브라우저 내에서 렌더링됩니다.

개발자 참고사항: Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아닌 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 및 모든 Flash 기반 시각화가 제대로 작동하지 않을 수 있습니다. 이 오류는 일반적으로 테스트 전용 문제입니다. 이 문제는 Adobe 웹사이트에 설명된 대로 해결할 수 있습니다.

다음 코드는 로컬 파일로 로드되면 작동하지 않습니다. 웹 서버에서 로드해야 합니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

로드

google.charts.load 패키지 이름은 "motionchart"입니다.

  google.charts.load('current', {'packages': ['motionchart']});

시각화의 클래스 이름은 google.visualization.MotionChart입니다.

  var visualization = new google.visualization.MotionChart(container);

데이터 형식

  • 첫 번째 열 은 '문자열' 유형이어야 하며 항목 이름(예: 위의 예에서는 '사과', '오렌지', '바나나')
  • 두 번째 열은 시간 값을 포함해야 합니다. 시간은 다음과 같은 형식으로 표현할 수 있습니다.
    • Year - 열 유형: 'number'. 예: 2008
    • 연도, 월, 일 - 열 유형은 'date'입니다. 값은 자바스크립트 Date 인스턴스여야 합니다.
    • 주 수 - 열 유형: '문자열'. 값은 ISO 8601을 준수하는 YYYYWww 패턴을 사용해야 합니다. 예: '2008W03'.
    • Quarter - 열 유형: 'string'. 값은 ISO 8601을 준수하는 YYYYQq 패턴이어야 합니다. 예: '2008Q3'.
  • 후속 열은 '숫자' 또는 '문자열' 유형일 수 있습니다. 숫자 열은 X, Y, 색상, 크기 축의 드롭다운 메뉴에 표시됩니다. 문자열 열은 색상 드롭다운 메뉴에만 표시됩니다. 위의 예를 참고하세요.

초기 상태 설정

모션 차트가 특정 상태, 즉 선택된 항목 및 뷰 맞춤설정의 집합으로 시작하도록 지정할 수 있습니다. 이렇게 하려면 먼저 차트를 만들고 표시한 다음 차트에 표시할 상태를 변경 (값 선택, 설정 변경 등)한 다음 이러한 설정을 문자열로 내보내고 마지막으로 코드에서 이 문자열을 사용하여 '상태' 옵션에 할당해야 합니다. 다음 두 섹션에서는 상태 코드를 내보낸 후 사용하는 방법을 설명합니다.

  1. 작동하는 차트를 열고 캡처할 설정을 지정합니다. 불투명도 수준, 확대/축소, 로그 대 선형 크기 조정을 지정할 수 있습니다.
  2. 차트의 오른쪽 하단에 있는 렌치 기호를 클릭하여 설정 패널을 엽니다.
  3. 왼쪽 하단에 있는 고급 링크를 클릭하여 세트에 고급 패널을 추가합니다.
  4. Advanced 패널을 확장하고 State 텍스트 상자의 콘텐츠를 클립보드에 복사합니다. (참고: 2~4단계에서 설명한 메뉴를 사용하는 대신 getState()를 호출하고 현재 상태를 메시지 상자에 표시하는 버튼을 페이지에 삽입할 수 있습니다.
  5. 여기 표시된 대로 이전 단계에서 복사한 상태 문자열을 코드의 'state' options 매개변수에 할당합니다. draw() 메서드에 전달하면 차트가 시작 시 지정된 상태로 초기화됩니다.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

구성 옵션

이름 유형 기본값 설명
숫자 300 픽셀 단위의 차트 높이입니다.
너비 숫자 500 픽셀 단위의 차트 너비입니다.
state 문자열 압축하지 않음 차트의 초기 표시 상태입니다. 확대/축소 수준, 선택한 크기, 선택한 풍선/항목, 기타 상태 설명을 설명하는 직렬화된 JSON 객체입니다. 이를 설정하는 방법은 초기 상태 설정을 참조하세요.
showChartButtons boolean true false는 오른쪽 상단에서 차트 유형 (풍선 / 선 / 열)을 제어하는 버튼을 숨깁니다.
showHeader boolean true false는 데이터 테이블의 첫 번째 열 라벨에서 가져온 항목의 제목 라벨을 숨깁니다.
showSelectListComponent boolean true false는 표시되는 항목 목록을 숨깁니다.
showSidePanel boolean true false는 오른쪽 패널을 숨깁니다.
showXMetricPicker boolean true false는 x의 측정항목 선택 도구를 숨깁니다.
showYMetricPicker boolean true false는 y에 대한 측정항목 선택 도구를 숨깁니다.
showXScalePicker boolean true false는 x의 배율 선택 도구를 숨깁니다.
showYScalePicker boolean true false는 y의 배율 선택 도구를 숨깁니다.
showAdvancedPanel boolean true false는 설정 패널의 옵션 칸을 사용 중지합니다.

메서드

메서드 반환 유형 설명
draw(data, options) 없음 제공된 옵션으로 차트를 그립니다.
getState() 문자열 JSON 문자열로 직렬화된 모션 차트의 현재 state를 반환합니다. 이 상태를 차트에 할당하려면 draw() 메서드의 state 옵션에 이 문자열을 할당합니다. 기본 상태를 사용하는 대신 시작 시 맞춤 차트 상태를 지정하는 데 자주 사용됩니다.

이벤트

이름 설명 속성
error 차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. ID, 메시지
준비됨 차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 그리기 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 없음
Statechange 사용자가 어떤 방식으로든 차트와 상호작용했습니다. 차트의 현재 상태를 알아보려면 getState()를 호출합니다. 없음

데이터 정책

브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.

참고사항

Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 및 모든 Flash 기반 시각화가 제대로 작동하지 않을 수 있습니다. 이 오류는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.