시각화: GeoChart

  1. 개요
  2. 지역 지역 차트
  3. 마커 위치정보 차트
  4. 텍스트 지역 차트
  5. 차트 색상 지정
  6. 로드 중
  7. 데이터 형식
  8. 구성 옵션
  9. 메서드
  10. 이벤트
  11. 데이터 정책

개요

지역 차트는 다음 세 가지 방법 중 하나로 영역이 식별되는 국가, 대륙 또는 지역의 지도입니다.

  • 지역 모드는 국가, 주, 주 등 전체 지역의 색상을 지정합니다.
  • 마커 모드에서는 원을 사용하여 지정한 값에 따라 크기가 조정된 지역을 지정합니다.
  • 텍스트 모드는 지역에 식별자 (예: '러시아' 또는 '아시아').

지역 차트는 SVG 또는 VML을 사용하여 브라우저 내에서 렌더링됩니다. 지리 차트는 스크롤하거나 드래그할 수 없으며 지형 지도가 아닌 선화입니다. 이러한 지리 지도가 필요한 경우 지도 시각화를 대신 사용해 보세요.

지역 지역 차트

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':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

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

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

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

마커 지역 차트

markers 스타일은 지정한 색상 및 크기로 지역 차트의 지정된 위치에 원을 렌더링합니다.
로마 주변의 어수선한 마커 위로 마우스를 가져가면 돋보기가 열려 마커를 자세히 볼 수 있습니다. (Internet Explorer 버전 8 이하에서는 돋보기가 지원되지 않습니다.)

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

비례 마커 표시

일반적으로 마커 위치정보 차트는 가장 작은 마커 값을 최소 점으로 표시합니다. 대신 비례 마커 값을 표시하려면 (예: 백분율) sizeAxis 옵션을 사용하여 minValue 및 maxValue를 명시적으로 설정하세요.

예를 들어 다음은 프랑스, 독일, 폴란드의 세 국가의 인구와 지역이 표시된 서유럽 지도입니다. 모집단은 모두 절댓값입니다 (예: 프랑스의 경우 6,500만 개) 전체의 백분율을 차지하지만, 프랑스 마커는 인구가 중간 정도이기 때문에 보라색이지만 전체 면적의 50% 를 포함하기 때문에 크기가 50(100점 중 최대 50)으로 설정되어 있습니다.

이 코드에서는 sizeAxis을 사용하여 마커 크기를 0~100의 범위로 지정합니다. 또한 RGB 값과 함께 colorAxis를 사용하여 주황색에서 파란색까지 색상 범위를 표시하며 색각 이상이 있는 사용자에게 적합한 스펙트럼입니다. 마지막으로 이 문서 뒷부분의 '콘텐츠 계층 구조 및 코드' 섹션에 따라 region 155로 서유럽을 지정합니다.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country',   'Population', 'Area Percentage'],
        ['France',  65700000, 50],
        ['Germany', 81890000, 27],
        ['Poland',  38540000, 23]
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '155', // Western Europe
        displayMode: 'markers',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

텍스트 지역 차트

displayMode: text를 사용하여 지역 차트에 텍스트 라벨을 오버레이할 수 있습니다.

데이터 및 옵션
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
전체 HTML
<html>
 <head>
  <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: Because this chart requires geocoding, you'll need a mapsApiKey.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

   function drawRegionsMap() {
     var data = google.visualization.arrayToDataTable([
       ['Country', 'Popularity'],
       ['South America', 600],
       ['Canada', 500],
       ['France', 600],
       ['Russia', 700],
       ['Australia', 600]
     ]);

     var options = { displayMode: 'text' };

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

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

차트 색상 지정

위치정보 차트의 색상을 맞춤설정하는 몇 가지 옵션이 있습니다.

  • colorAxis: 데이터 테이블의 리전에 사용할 색상 스펙트럼
  • backgroundColor: 차트의 배경 색상입니다.
  • datalessRegionColor: 연결된 데이터가 없는 지역에 할당할 색상입니다.
  • defaultColor: 값이 null이거나 지정되지 않은 데이터 테이블의 영역에 할당할 색상입니다.

colorAxis 옵션은 데이터 값의 색상 범위를 지정하는 중요한 옵션입니다. colorAxis 배열에서 첫 번째 요소는 데이터 세트의 가장 작은 값에 지정된 색상이고 마지막 요소는 데이터 세트에서 가장 큰 값에 지정된 색상입니다. 3개 이상의 색상을 지정하면 색상 간에 보간이 수행됩니다.

다음 차트에서는 4가지 옵션을 모두 사용합니다. colorAxis는 북쪽은 빨간색, 남쪽은 초록색, backgroundColor 옵션은 배경을 연한 파란색으로, datalessRegionColor를 사용하여 아프리카 이외 국가의 경우 연한 분홍색으로, 마다가스카르의 경우 defaultColor를 사용합니다.
옵션
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
전체 웹페이지
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
  </body>
</html>

로드

google.charts.load 패키지 이름은 "geochart"입니다. mapsApiKey는 복사하면 안 됩니다. 복사하면 작동하지 않습니다. 차트에서 지오코딩이 필요하지 않거나 비표준 코드를 사용하여 위치를 식별하지 않는 한 mapsApiKey가 필요하지 않습니다. 자세한 내용은 로드 설정을 참고하세요. 

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: if your chart requires geocoding or uses nonstandard codes, you'll
    // need to get a mapsApiKey for your project. The one below won't work.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

지리 차트 시각화 클래스 이름은 google.visualization.GeoChart입니다. 

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

데이터 형식

DataTable의 형식은 regions, markers, text 등 사용하는 표시 모드에 따라 다릅니다.

지역 모드 형식

위치는 아래에 설명된 대로 한 개의 열과 한 개의 선택 열에 입력됩니다.

  1. 지역 위치[문자열, 필수] - 강조 표시할 지역입니다. 다음 형식이 모두 허용됩니다. 다음과 같이 행마다 다른 형식을 사용할 수 있습니다.
    • 문자열 (예: '잉글랜드'), 대문자 ISO-3166-1 alpha-2 코드 또는 이에 상응하는 영문 텍스트 (예: 'GB' 또는 '영국')로 된 국가 이름입니다.
    • 대문자 ISO-3166-2 지역 코드명 또는 이에 상응하는 영문 텍스트 (예: 'US-NJ' 또는 'New Jersey')
    • 권역 번호. 이는 다양한 지역을 지정하는 데 사용되는 세 자리 대도시 코드입니다. 미국 코드만 지원됩니다. 이 번호는 전화 지역 번호와 동일하지 않습니다.
    • region 속성에서 지원하는 모든 값입니다.
  2. 지역 색상[숫자, 선택사항] - colorAxis.colors 속성에 지정된 축척을 기준으로 이 지역에 색상을 할당하는 데 사용되는 숫자 열입니다(선택사항). 이 열이 없으면 모든 지역이 동일한 색상으로 표시됩니다. 열이 있으면 null 값이 허용되지 않습니다. 값은 sizeAxis.minValue/sizeAxis.maxValue 값 또는 colorAxis.values 속성에 지정된 값(제공된 경우)을 기준으로 조정됩니다.

마커 모드 형식

열의 수는 사용된 마커 형식 및 기타 선택적 열에 따라 다릅니다.

  • 마커 위치[필수]
    첫 번째 열은 특정 문자열 주소입니다(예: '1600 Pennsylvania Ave').

    또는

    처음 두 열은 숫자이며, 여기서 첫 번째 열은 위도이고 두 번째 열은 경도입니다.

    참고: '지역' 모드에 ISO 3166 코드를 사용하는 것이 좋지만 '마커' 모드는 길이가 긴 지역 (예: 독일, 파나마 등)에서 가장 잘 작동합니다. 이는 '마커' 모드일 때 geochart가 Google 지도를 사용하여 위치를 지오코딩(문자열 위치를 위도 및 경도로 변환)하기 때문입니다. 이로 인해 독일 또는 델라웨어를 'DE'로 표기하거나 파나마나 펜실베이니아를 'PA'로 하는 등 모호한 위치가 예상대로 지오코딩되지 않을 수 있습니다.

  • 마커 색상[숫자, 선택사항] 다음 열은 colorAxis.colors 속성에 지정된 스케일을 기준으로 이 마커에 색상을 할당하는 데 사용되는 숫자 열(선택사항)입니다. 이 열이 없으면 모든 마커의 색상이 동일합니다. 열이 있으면 null 값이 허용되지 않습니다. 값은 서로를 기준으로 또는 colorAxis.values 속성에 지정된 값에 절대적으로 조정됩니다.
  • 마커 크기[숫자, 선택사항] 다른 마커 크기를 기준으로 마커 크기를 할당하는 데 사용되는 숫자 열입니다(선택사항). 이 열이 없으면 이전 열의 값 (또는 색상 열이 제공되지 않은 경우 기본 크기)이 사용됩니다. 열이 있으면 null 값이 허용되지 않습니다.

텍스트 모드 형식

라벨은 첫 번째 열에 추가로 입력 열과 선택 열 하나를 입력합니다.

  • 텍스트 라벨 [문자열, 필수] 특정 문자열 주소입니다(예: '1600 Pennsylvania Ave').
  • 텍스트 크기[숫자, 선택사항] 두 번째 열은 라벨 크기를 할당하는 데 사용되는 숫자 열(선택사항)입니다. 이 열이 없으면 모든 라벨의 크기가 같습니다.

구성 옵션

이름
backgroundColor

차트의 기본 영역의 배경 색상입니다. 간단한 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음과 같은 속성을 갖는 객체일 수 있습니다.

유형: 문자열 또는 객체
기본: 흰색
backgroundColor.fill

HTML 색상 문자열로 된 차트 채우기 색상입니다.

유형: 문자열
기본: 흰색
backgroundColor.stroke

차트 테두리의 색상으로, HTML 색상 문자열로 지정됩니다.

유형: 문자열
기본값: '#666'
backgroundColor.strokeWidth

테두리 너비(픽셀)입니다.

유형: 숫자
기본값: 0
colorAxis

색상 열 값과 색상 또는 그라데이션 스케일 간의 매핑을 지정하는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
유형: 객체
기본값: null
colorAxis.minValue

있는 경우 차트 색상 데이터의 최솟값을 지정합니다. 이 값 이하의 색상 데이터 값은 colorAxis.colors 범위의 첫 번째 색상으로 렌더링됩니다.

유형: 숫자
기본값: 차트 데이터에서 색상 열의 최솟값
colorAxis.maxValue

있는 경우 차트 색상 데이터의 최댓값을 지정합니다. 이 값 이상의 색상 데이터 값은 colorAxis.colors 범위의 마지막 색상으로 렌더링됩니다.

유형: 숫자
기본값: 차트 데이터의 색상 열의 최댓값
colorAxis.values

있는 경우 값이 색상과 연결되는 방식을 제어합니다. 각 값은 colorAxis.colors 배열의 상응하는 색상과 연결됩니다. 이 값은 차트 색상 데이터에 적용됩니다. 색상은 여기에 지정된 값의 그라데이션에 따라 수행됩니다. 이 옵션의 값을 지정하지 않는 것은 [minValue, maxValue]를 지정하는 것과 같습니다.

유형: 숫자 배열
기본값: null
colorAxis.colors

시각화의 값에 할당할 색상입니다. 문자열 배열로, 여기서 각 요소는 HTML 색상 문자열입니다(예: colorAxis: {colors:['red','#004411']}). 2개 이상의 값이 있어야 합니다. 그라데이션에는 모든 값과 계산된 중간 값이 포함되며, 첫 번째 색상이 가장 작은 값, 마지막 색상이 가장 높은 값입니다.

Type: 색상 문자열의 배열
기본값: null
datalessRegionColor

연결된 데이터가 없는 지역에 할당할 색상입니다.

유형: 문자열
기본값: '#F5F5F5'
defaultColor

위치가 지정된 경우 지역 차트의 데이터 포인트에 사용할 색상입니다(예: 'US')이 존재하지만 값이 null이거나 지정되지 않았습니다. 이는 데이터가 누락될 때 사용되는 색상인 datalessRegionColor와는 다릅니다.

유형: 문자열
기본값: '#267114'
displayMode

위치정보 차트의 유형입니다. DataTable 형식은 지정된 값과 일치해야 합니다. 지원되는 값은 다음과 같습니다.

  • 'auto' - DataTable의 형식에 따라 선택합니다.
  • 'regions' - 지역 차트에서 지역의 색상을 지정합니다.
  • 'markers' - 지역에 마커를 배치합니다.
  • 'text' - DataTable의 텍스트로 지역에 라벨을 지정합니다.
유형: 문자열
기본값: 'auto'
도메인

이 지역에서 제공되는 것처럼 지역 차트를 표시합니다. 예를 들어 domain를 'IN'로 설정하면 카슈미르가 분쟁 지역이 아닌 인도에 속한 것으로 표시됩니다.

유형: 문자열
기본값: null
enableRegionInteractivity

true인 경우 마우스 오버 시 포커스와 툴팁을 자세히 설명하고 마우스 클릭 시 regionClick 및 select 이벤트를 선택하고 실행하는 등 영역 상호작용을 사용 설정합니다.

기본값은 지역 모드에서는 true이고, 마커 모드에서는 false입니다.

유형: 불리언
기본값: 자동
forceIFrame

인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다.

유형: 불리언
기본값: false
geochartVersion

GeoChart 테두리 데이터의 버전입니다. 10 및 11 버전을 사용할 수 있습니다.

유형: 숫자
기본값: 10
키

시각화의 높이(픽셀)입니다. 기본 높이는 347픽셀입니다. 단, width 옵션이 지정되고 keepAspectRatio이 true로 설정된 경우에는 높이가 적절하게 계산됩니다.

유형: 숫자
기본값: auto
keepAspectRatio

true인 경우 지역 차트가 자연스러운 가로세로 비율에서 차트 영역 내에 들어갈 수 있는 가장 큰 크기로 그려집니다. width 및 height 옵션 중 하나만 지정된 경우 다른 옵션은 가로세로 비율에 따라 계산됩니다.

false인 경우 위치정보 차트가 width 및 height 옵션에서 지정한 정확한 차트 크기로 확장됩니다.

유형: 불리언
기본값: true
범례

범례의 다양한 측면을 구성하는 구성원이 포함된 객체 또는 범례를 표시하지 않아야 하는 경우 '없음'입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하세요. 

 {textStyle: {color: 'blue', fontSize: 16}}
유형: 객체 / '없음'
기본값: null
legend.numberFormat

숫자 라벨의 형식 문자열입니다. ICU 패턴 집합 의 하위 집합입니다. 예를 들어 {numberFormat:'.##'}는 값 10.666, 10.6, 10에 대해 값 '10.66', '10.6', '10.0'을 표시합니다.

유형: 문자열
기본값: auto
legend.textStyle

범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
리전

지역 차트에 표시할 영역입니다. 주변 지역도 표시됩니다. 다음 중 하나일 수 있습니다.

  • 'world' - 전 세계의 지리 정보 차트입니다.
  • 3자리 코드로 지정된 대륙 또는 아대륙입니다(예: 서아프리카를 '011'로 지정합니다.
  • ISO 3166-1 alpha-2 코드로 지정된 국가입니다(예: 오스트레일리아는 'AU'입니다.
  • ISO 3166-2:US 코드로 지정한 미국 내 주입니다(예: 앨라배마를 'US-AL'로 설정합니다. resolution 옵션은 'provinces' 또는 'metros'로 설정해야 합니다.
유형: 문자열
기본값: 'world'
magnifyingGlass

돋보기의 다양한 측면을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{enable: true, zoomFactor: 7.5}
유형: 객체
기본값: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

true인 경우 사용자가 어수선한 마커 위에 머무르면 돋보기가 열립니다.

참고: 이 기능은 SVG를 지원하지 않는 브라우저(예: Internet Explorer 버전 8 이하)에서는 지원되지 않습니다.

유형: 불리언
기본값: true
magnifyingGlass.zoomFactor

돋보기의 확대/축소 배율입니다. 0보다 큰 모든 숫자일 수 있습니다.

유형: 숫자
기본값: 5.0
markerOpacity

마커의 불투명도입니다. 여기서 0.0은 완전히 투명하고 1.0은 완전히 불투명합니다.

유형: 숫자, 0.0~1.0
기본값: 1.0
regioncoderVersion

지역코더 데이터의 버전입니다. 0 및 1 버전을 사용할 수 있습니다.

유형: 숫자
기본값:0
resolution

지오차트 테두리의 해상도입니다. 다음 값 중 하나를 선택합니다.

  • 'countries' - 미국의 주를 제외한 모든 지역에서 지원됩니다.
  • 'provinces' - 국가 지역 및 미국 주 지역에서만 지원됩니다. 일부 국가에서는 지원되지 않습니다. 이 옵션이 지원되는지 국가를 테스트하여 확인하세요.
  • 'metros' - 미국 국가 지역과 미국 주 지역에서만 지원됩니다.
유형: 문자열
기본값: 'countries'
sizeAxis

값이 풍선 크기와 연결되는 방식을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

 {minValue: 0,  maxSize: 20}
유형: 객체
기본값: null
sizeAxis.maxSize

가능한 가장 큰 풍선의 최대 반경(픽셀)입니다.

유형: 숫자
기본값: 12
sizeAxis.maxValue

sizeAxis.maxSize에 매핑할 크기 값 (차트 데이터에 표시됨)입니다. 더 큰 값은 이 값으로 잘립니다.

유형: 숫자
기본값: 차트 데이터의 최대 크기 열 값
sizeAxis.minSize

가능한 가장 작은 풍선의 최소 반경(픽셀)입니다.

유형: 숫자
기본값: 3
sizeAxis.minValue

sizeAxis.minSize에 매핑할 크기 값 (차트 데이터에 표시됨)입니다. 더 작은 값은 이 값으로 잘립니다.

유형: 숫자
기본값: 차트 데이터에서 크기 열의 최솟값
도움말

다양한 도움말 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{textStyle: {color: '#FF0000'}, showColorCode: true}
유형: 객체
기본값: null
tooltip.textStyle

도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

도움말이 표시되도록 하는 사용자 상호작용입니다.

  • 'focus' - 사용자가 요소 위로 마우스를 가져가면 도움말이 표시됩니다.
  • 'none' - 도움말이 표시되지 않습니다.
  • 'selection' - 사용자가 요소를 선택하면 도움말이 표시됩니다.
유형: 문자열
기본값: 'focus'
너비

시각화 너비(픽셀)입니다. 기본 너비는 556픽셀입니다. 단, height 옵션이 지정되고 keepAspectRatio가 true로 설정된 경우에는 너비가 적절하게 계산됩니다.

유형: 숫자
기본값: auto

 

대륙 계층 구조 및 코드

region 옵션을 다음 3자리 코드 중 하나로 설정하여 대륙/아대륙의 지리 차트를 표시할 수 있습니다. 규범과 계층 구조는 일부 예외를 제외하고 UN 통계국 에서 개발하고 유지하는 것을 기반으로 합니다.

대륙 아대륙 국가
002 - 아프리카 015 - 북아프리카 DZ, EG, EH, LY, MA, SD, SS, TN
011 - 서아프리카 BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR, MR, MR, GMSHSLSN
017 - 중동 AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - 동아프리카 BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZRERWSCSOTZUG
018 - 남아프리카 공화국 BW, LS, NA, SZ, ZA
150 - 유럽 154 - 북유럽 GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS{3, IS,LV
155 - 서유럽 AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - 동유럽 BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - 남유럽 AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, {UPT2}MT,
019 - 미주 021 - 북미 BM, 캐나다, GL, PM, 미국
029 - 카리브해 AG, AI, AN, AW, BB, BL, BS, CU, DMDO, GD,GPLCMS
013 - 중앙 아메리카 BZ, CR, GT, HN, MX, NI, PA, SV
005 - 남미 AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, , ,, SRVE
142 - 아시아 143 - 중앙 아시아 TM, TJ, KG, KZ, UZ
030 - 동아시아 대한민국, HK, 일본, KP, 대한민국, 다만, 미주, 타이완
034 - 남아시아 AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - 동남아시아 BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, , VN
145 - 서아시아 AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW LB
009 - 오세아니아 053 - 오스트레일리아, 뉴질랜드 AU, NF, 뉴질랜드
054 - 멜라네시아 FJ, NC, PG, SB, VU
057 - 미크로네시아 FM, GU, KI, MH, MP, NR, PW
061 - 폴리네시아 AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

메서드

메서드
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음
draw(data, options)

차트를 그립니다. 차트에서는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description.

반환 유형: 없음
getImageURI()

이미지 URI로 직렬화된 차트를 반환합니다.

차트를 그린 후에 이 메서드를 호출합니다.

PNG 차트 인쇄를 참조하세요.

반환 유형: 문자열
getSelection()

선택된 차트 항목의 배열을 반환합니다. 선택 가능한 항목은 할당된 값이 있는 리전입니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 항목은 할당된 값이 있는 리전입니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음

이벤트

이름
error

차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
ready

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
regionClick

지역을 클릭하면 호출됩니다. 'region' 옵션에 할당된 특정 국가의 경우 이 오류가 발생하지 않습니다 (특정 국가가 나열되어 있는 경우).

속성: 클릭된 지역을 설명하는 ISO-3166 형식의 문자열로, 단일 속성 region를 포함하는 객체입니다.
select

사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

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