시각화: Geomap

개요

지역 지도는 특정 지역에 할당된 색상과 값을 가진 국가, 대륙 또는 지역의 지도입니다. 값은 색상 스케일로 표시되며 지역에 마우스 오버 텍스트를 선택적으로 지정할 수 있습니다. 지도는 삽입된 Flash 플레이어를 사용하여 브라우저에서 렌더링됩니다. 지도는 스크롤하거나 드래그할 수 없지만 확대/축소를 허용하도록 구성할 수 있습니다.

여기에는 두 가지 예가 있습니다. 하나는 지역 표시 스타일을 사용하고 다른 하나는 마커 디스플레이 스타일을 사용합니다.

지역 예

지역 스타일은 전체 지역 (일반적으로 국가)을 할당한 값에 해당하는 색상으로 채웁니다. 코드에서 options['dataMode'] = 'regions'를 할당하여 지역 스타일을 지정합니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

마커 예

'마커' 스타일은 지정된 지역 위에 크기가 지정된 색상과 원을 표시하여 값을 나타냅니다.

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

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

로드 중

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

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

지역 지도 시각화 클래스 이름은 google.visualization.GeoMap입니다.

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

데이터 형식

두 가지 주소 형식이 지원됩니다. 각 형식에는 서로 다른 개수의 열과 각 열에 다른 데이터 유형이 지원됩니다. 테이블의 모든 주소는 둘 중 하나만 사용해야 합니다. 유형을 혼합할 수 없습니다.

  • 형식 1: 위도/경도 위치 이 형식은 dataMode 옵션이 '마커'인 경우에만 작동합니다. 이 형식을 사용하는 경우 Google 지도 자바스크립트를 포함하지 않아도 됩니다. 위치는 두 개의 열과 선택적 열 두 개에 입력됩니다.
    1. [숫자, 필수] 위도입니다. 양수는 북쪽, 음수는 남쪽입니다.
    2. [숫자, 필수] 경도입니다. 양수는 동쪽, 음수는 서쪽입니다.
    3. [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 열 4를 사용하는 경우 이 열은 필수입니다.
    4. [문자열, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
  • 형식 2: 주소, 국가 이름, 지역 이름 위치 또는 미국 대도시 지역 번호 이 형식은 '마커' 또는 '지역'으로 설정된 dataMode 옵션과 함께 사용할 수 있습니다. 위치는 1개의 열과 2개의 선택적인 열에 입력됩니다.
    1. [문자열, 필수] 지도 위치입니다. 다음과 같은 형식이 허용됩니다.
      • 특정 주소 (예: '1600 Pennsylvania Ave')
      • 문자열 (예: '영국') 또는 대문자 ISO-3166 코드나 영어 텍스트 (예: 'GB' 또는 '영국')로 표시된 국가 이름입니다.
      • 대문자 ISO-3166-2 지역 코드명 또는 이에 상응하는 영문 텍스트 (예: 'US-NJ' 또는 '뉴저지') 참고: 리전은 dataMode 옵션이 '리전'으로 설정된 경우에만 지정할 수 있습니다.
      • 권역 지역 번호. 여러 지역을 지정하는 데 사용되는 3자리 대도시 코드입니다. 미국 코드만 지원됩니다. 전화번호와 지역 코드는 동일하지 않습니다.
    2. [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 열 3을 사용하는 경우 이 열은 필수입니다.
    3. [문자열, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.

참고: 지도에는 최대 400개의 항목을 표시할 수 있습니다. DataTable 또는 DataView에 행이 400개를 초과하면 처음 400개만 표시됩니다. 가장 빠른 모드는 위치가 ISO 코드로 지정된 dataMode='regions' 및 위도/경도 엔엔티가 있는 dataMode='markers'입니다. 가장 느린 모드는 문자열 주소가 있는 dataMode='markers'입니다.

중요: DataTable는 사용할 열 앞에 있는 모든 선택 열을 반드시 포함해야 합니다. 예를 들어 경도/위도 테이블을 지정하려고 하며 열 1, 2, 4만 사용하려는 경우 DataTable는 여전히 열 3을 정의해야 합니다 (값을 추가할 필요는 없음).

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

구성 옵션

이름 유형 기본 설명
region 문자열 '세계'

지도에 표시할 영역입니다. (주변 지역도 표시됩니다.) 국가 코드 (대문자 ISO-3166 형식) 또는 다음 문자열 중 하나일 수 있습니다.

  • world - (전 세계)
  • us_metro - (미국, 대도시)
  • 005~(남미)
  • 013 - (중앙 아메리카)
  • 021~(북미)
  • 002 - (아프리카 전체)
  • 017 - (중앙 아프리카)
  • 015 - (북아프리카)
  • 018 - (남아프리카 공화국)
  • 030 - (동아시아)
  • 034 - (남아시아)
  • 035 - (아시아 태평양 지역)
  • 009~(오세아니아)
  • 145 - (중동)
  • 143 - (중앙 아시아)
  • 151 - (북아시아)
  • 154 - (북유럽)
  • 155~(서유럽)
  • 039~(남부 유럽)

Geomap은 스크롤 또는 드래그 동작을 지원하지 않으며 확대/축소 동작만 제한합니다. 기본 축소 기능은 showZoomOut 속성을 설정하여 사용 설정할 수 있습니다.

dataMode 문자열 '지역'

값을 지도에 표시하는 방법 두 가지 값이 지원됩니다.

  • regions - 전체 지역의 색상을 적절한 색상으로 지정합니다. 이 옵션은 위도/경도 주소와 함께 사용할 수 없습니다. 리전 예시를 참고하세요.
  • markers - 값을 나타내는 색상과 크기로 지역 위에 점을 표시합니다. 마커 예를 참고하세요.
width 문자열 '556px' 시각화의 너비입니다. 단위가 지정되지 않은 경우 기본 단위는 픽셀입니다.
height 문자열 '347px' 시각화의 높이입니다. 단위가 지정되지 않은 경우 기본 단위는 픽셀입니다.
colors 0xRRGGBB 형식의 RGB 숫자 배열 [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] 시각화의 값에 할당할 색상 그라디언트입니다. 값이 2개 이상 있어야 합니다. 경사에는 모든 값과 계산된 중간 값이 포함되며, 가장 밝은 색은 가장 작은 값으로, 가장 밝은 색은 가장 높은 값으로 포함됩니다.
showLegend boolean true true인 경우 지도의 범례를 표시합니다.
showZoomOut boolean false true인 경우 zoomOutLabel 속성에서 지정한 라벨이 있는 버튼을 표시합니다. 이 버튼은 클릭했을 때 아무 작업도 하지 않습니다. 단, zoomOut 이벤트가 발생합니다. 확대/축소를 처리하려면 이 이벤트를 포착하고 region 옵션을 변경합니다. region 옵션이 세계 뷰보다 작은 경우에만 showZoomOut을 지정할 수 있습니다. 확대 동작을 사용 설정하는 한 가지 방법은 regionClick 이벤트를 수신 대기하고 region 속성을 적절한 지역으로 변경한 다음 지도를 새로고침하는 것입니다.
zoomOutLabel 문자열 '축소' 확대/축소 버튼의 라벨입니다.

방법

메서드 반환 유형 설명
draw(data, options) 없음 지도를 그립니다. 그리기가 완료되기 전에 반환될 수 있습니다 (drawingDone() 이벤트 참고).
getSelection() 선택 요소 배열 표준 getSelection() 구현 선택한 요소는 행입니다. 이 메서드는 dataMode 옵션이 '리전'인 경우에만 작동합니다. 값이 할당된 리전만 선택할 수 있습니다.
setSelection(selection) 없음 표준 setSelection() 구현입니다. 선택 항목을 행 선택으로 취급하고 여러 행 선택을 지원합니다. 할당된 값이 있는 리전만 선택할 수 있습니다.

이벤트

이름 설명 속성
error 차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. ID, 메시지
select

사용자가 값이 할당된 지역을 클릭하면 발생됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요. dataMode 옵션이 '리전'으로 설정된 경우에만 사용할 수 있습니다.

참고: 일부 제한사항으로 인해 select 이벤트가 브라우저에서 페이지로 액세스(예: 'file://')을 전송합니다. 'http://www').

없음
regionClick

리전을 클릭하면 호출됩니다. '지역' 및 '마커' dataMode 모두에 사용할 수 있습니다. 그러나 마커 모드에서는 '지역' 옵션에 할당된 특정 국가 (특정 국가가 나열된 경우)에 이 문제가 발생하지 않습니다.

참고: 일부 제한사항으로 인해 브라우저에서 regionClick 이벤트가 파일 (예: 'file://')을 전송합니다. 'http://www').

클릭된 지역을 설명하는 ISO-3166 형식의 문자열인 단일 속성 region를 포함하는 객체.
zoomOut

축소 버튼을 클릭하면 호출됩니다. 확대/축소를 처리하려면 이 이벤트를 포착하고 region 옵션을 변경합니다.

참고: 일부 제한사항으로 인해 zoomOut 이벤트가 브라우저에서 페이지로 액세스(예: 'file://')을 전송합니다. 'http://www').

없음
drawingDone Geomap이 그리기를 완료하면 호출됩니다. 없음

데이터 정책

위치는 Google 지도에서 지오코딩됩니다. 지오코딩이 필요하지 않은 데이터는 어떠한 서버로도 전송되지 않습니다. 데이터 정책에 관한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.

참고사항

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