개요
시간 경과에 따라 여러 지표를 탐색하는 동적 차트 차트는 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);
데이터 형식
- 첫 번째 열 은 '문자열' 유형이어야 하며 항목 이름(예: 위의 예에서는 '사과', '오렌지', '바나나')
- 두 번째 열은 시간 값을 포함해야 합니다. 시간은 다음과 같은 형식으로 표현할 수 있습니다.
- 후속 열은 '숫자' 또는 '문자열' 유형일 수 있습니다. 숫자 열은 X, Y, 색상, 크기 축의 드롭다운 메뉴에 표시됩니다. 문자열 열은 색상 드롭다운 메뉴에만 표시됩니다. 위의 예를 참고하세요.
초기 상태 설정
모션 차트가 특정 상태, 즉 선택된 항목 및 뷰 맞춤설정의 집합으로 시작하도록 지정할 수 있습니다. 이렇게 하려면 먼저 차트를 만들고 표시한 다음 차트에 표시할 상태를 변경 (값 선택, 설정 변경 등)한 다음 이러한 설정을 문자열로 내보내고 마지막으로 코드에서 이 문자열을 사용하여 '상태' 옵션에 할당해야 합니다. 다음 두 섹션에서는 상태 코드를 내보낸 후 사용하는 방법을 설명합니다.
- 작동하는 차트를 열고 캡처할 설정을 지정합니다. 불투명도 수준, 확대/축소, 로그 대 선형 크기 조정을 지정할 수 있습니다.
- 차트의 오른쪽 하단에 있는 렌치 기호를 클릭하여 설정 패널을 엽니다.
- 왼쪽 하단에 있는 고급 링크를 클릭하여 세트에 고급 패널을 추가합니다.
- Advanced 패널을 확장하고 State 텍스트 상자의 콘텐츠를 클립보드에 복사합니다. (참고: 2~4단계에서 설명한 메뉴를 사용하는 대신
getState()를 호출하고 현재 상태를 메시지 상자에 표시하는 버튼을 페이지에 삽입할 수 있습니다. - 여기 표시된 대로 이전 단계에서 복사한 상태 문자열을 코드의 '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 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.