개요
시간 경과에 따른 여러 지표를 살펴보는 동적 차트 차트는 브라우저 내에서 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, 색상, 크기 축의 드롭다운 메뉴에 표시됩니다. 문자열 열은 색상의 드롭다운 메뉴에만 표시됩니다. 위의 예를 참고하세요.
초기 상태 설정
모션 차트가 특정 상태, 즉 선택한 항목의 집합과 보기 맞춤설정을 시작하도록 지정할 수 있습니다. 이렇게 하려면 먼저 차트를 만들고 표시한 후 차트를 표시할 상태 변경 (값 선택, 설정 변경 등)을 수행하고, 이러한 설정을 문자열로 내보내고, 마지막으로 코드에서 이 문자열을 사용하여 '상태' 옵션에 할당해야 합니다. 다음 두 섹션에서는 상태 코드를 내보낸 후 사용하는 방법을 설명합니다.
- 작업 차트를 열고 캡처할 설정을 설정합니다. 지정할 수 있는 설정에는 불투명도 수준, 확대/축소, 로그 대 선형 배율이 있습니다.
- 차트 오른쪽 하단의 렌치 기호를 클릭하여 설정 패널을 엽니다.
- 왼쪽 하단에 있는 고급 링크를 클릭하여 고급 패널을 세트에 추가합니다.
- 고급 패널을 펼치고 상태 텍스트 상자의 콘텐츠를 클립보드에 복사합니다. 참고: 2~4단계에서 설명한 메뉴를 사용하는 대신
getState()를 호출하고 메시지 상자에 현재 상태를 표시하는 버튼을 페이지에 삽입할 수 있습니다. - 이전 단계에서 복사한 상태 문자열을 다음과 같이 코드의 'state' 옵션 매개변수에 할당합니다.
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 | 거짓은 오른쪽 상단에 있는 차트 유형 (풍선 / 선 / 열)을 제어하는 버튼을 숨깁니다. |
| 프로그램 헤더 | boolean | true | false는 항목 제목 라벨을 숨깁니다 (데이터 표의 첫 번째 열의 라벨에서 가져옴). |
| ShowSelectListComponent | boolean | true | false는 표시되는 항목의 목록을 숨깁니다. |
| 측면 패널 표시 | boolean | true | false - 오른쪽 패널을 숨깁니다. |
| ShowXMetricPicker | boolean | true | false이면 x의 측정항목 선택 도구가 숨겨집니다. |
| ShowYMetricPicker | boolean | true | false로 설정하면 y의 측정항목 선택 도구가 숨겨집니다. |
| ShowXScalePicker | boolean | true | false이면 x의 배율 선택 도구가 숨겨집니다. |
| ShowYScalePicker | boolean | true | false이면 y의 축척 선택 도구가 숨겨집니다. |
| 고급 패널 표시 | boolean | true | false로 설정하면 설정 패널에서 옵션 구획이 사용 중지됩니다. |
방법
| 메서드 | 반환 유형 | 설명 |
|---|---|---|
draw(data, options) |
없음 | 제공된 옵션으로 차트를 그립니다. |
getState() |
문자열 | JSON 차트의 직렬화된 모션 차트의 현재 상태를 반환합니다. 이 상태를 차트에 할당하려면 draw() 메서드의 state 옵션에 이 문자열을 할당합니다. 기본 상태를 사용하는 대신 시작 시 맞춤 차트 상태를 지정하는 데 자주 사용됩니다. |
이벤트
| 이름 | 설명 | 속성 |
|---|---|---|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. | ID, 메시지 |
| 준비됨 | 차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. | 없음 |
| 상태 변경 | 사용자가 차트와 상호작용했습니다. getState()를 호출하여 차트의 현재 상태를 확인합니다. |
없음 |
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 어떠한 서버로도 전송되지 않습니다.
참고사항
플래시 보안 설정 때문에 이 서버 설정과 모든 플래시 기반 시각화가 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 올바르게 작동하지 않을 수 있습니다. 이는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 극복할 수 있습니다.