개요
지역 차트는 다음 세 가지 방법 중 하나로 영역을 식별하는 국가, 대륙 또는 지역의 지도입니다.
- 지역 모드는 국가, 주, 주와 같은 전체 지역에 색상을 지정합니다.
- 마커 모드는 원을 사용하여 사용자가 지정하는 값에 따라 확장되는 지역을 지정합니다.
- 텍스트 모드는 영역에 식별자 (예: '러시아' 또는 '아시아').
지역 차트는 SVG 또는 VML을 사용하여 브라우저 내에서 렌더링됩니다. 지리 차트는 스크롤하거나 드래그할 수 없으며, 지형 지도보다는 선 차트입니다. 이 기능을 사용하려면 지도 시각화를 대신 사용해 보세요.
지역 GeoCharts
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만) 전체 면적의 백분율을 나타냅니다. 인구가 미드롤이기 때문에 프랑스 마커의 색상이 보라색이지만 100개 중 50개가 결합 영역의 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>
<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>
차트 색상 지정
GeoCharts 색상을 맞춤설정하는 몇 가지 옵션이 있습니다.
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)에 따라 다릅니다.
리전 모드 형식
위치는 여기에 설명된 대로 하나의 열과 하나의 선택적 열에 입력됩니다.
-
리전 위치[문자열, 필수] - 강조표시할 지역입니다.
다음 형식이 모두 허용됩니다. 여러 행에 다른 형식을 사용할 수 있습니다.
- 문자열 (예: '영국') 또는 대문자 ISO-3166-1 alpha-2 코드나 이에 상응하는 영어 텍스트 (예: 'GB' 또는 '영국')입니다.
- 대문자 ISO-3166-2 지역 코드 이름 또는 영문 텍스트 (예: 'US-NJ' 또는 '뉴저지')
- 권역 지역 번호. 여러 지역을 지정하는 데 사용되는 3자리 대도시 코드입니다. 미국 코드만 지원됩니다. 전화번호와 지역 코드는 동일하지 않습니다.
region속성에서 지원하는 모든 값입니다.
-
지역 색상[숫자, 선택사항] -
colorAxis.colors속성에 지정된 축척에 따라 이 지역에 색상을 할당하는 데 사용되는 숫자 열(선택사항)입니다. 이 열이 없으면 모든 리전이 동일한 색상으로 표시됩니다. 열이 있는 경우 null 값은 허용되지 않습니다. 값은sizeAxis.minValue/sizeAxis.maxValue값을 기준으로 또는 제공된 경우colorAxis.values속성에 지정된 값을 기준으로 조정됩니다.
마커 모드 형식
열의 개수는 사용된 마커 형식 및 기타 선택적 열에 따라 다릅니다.
-
마커 위치[필수]
또는
첫 번째 열은 특정 문자열 주소입니다(예: '1600 Pennsylvania Ave').처음 두 열은 숫자이며, 여기서 첫 번째 열은 위도이고 두 번째 열은 경도입니다.
참고: '지역' 모드에서는 ISO 3166 코드를 사용하는 것이 좋지만 '마커' 모드는 독일, 파나마 등 지역의 긴 이름에 가장 적합합니다. 이는 '마커' 모드일 때 위치정보가 Google 지도를 사용하여 위치를 지오코딩하기(문자열 위치를 위도와 경도로 변환)하기 때문입니다. 이로 인해 독일이나 델라웨어를 'DE'로 의미하거나 파나마 또는 펜실베이니아를 'PA'로 표시하는 등 모호한 위치가 지오코딩되지 않을 수 있습니다.
-
마커 색상[숫자, 선택사항] 다음 열은
colorAxis.colors속성에 지정된 배율을 기준으로 이 마커에 색상을 할당하는 데 사용되는 숫자 열입니다(선택사항). 이 열이 없으면 모든 마커가 동일한 색상으로 표시됩니다. 열이 있는 경우 null 값은 허용되지 않습니다. 값은 서로 상대적으로 또는colorAxis.values속성에 지정된 값에 따라 조정됩니다. - 마커 크기[숫자, 선택사항] 다른 마커 크기를 기준으로 마커 크기를 할당하는 데 사용되는 숫자 열입니다(선택사항). 이 열이 없으면 이전 열의 값이 사용됩니다 (색상 열이 제공되지 않은 경우에는 기본 크기도 사용됨). 열이 있는 경우 null 값은 허용되지 않습니다.
텍스트 모드 형식
라벨은 첫 번째 열과 하나의 선택적 열에 입력됩니다.
- 텍스트 라벨[문자열, 필수] 특정 문자열 주소(예: '1600 Pennsylvania Ave')
- 텍스트 크기[숫자, 선택사항] 두 번째 열은 라벨의 크기를 할당하는 데 사용되는 숫자 열(선택사항)입니다. 이 열이 없으면 모든 라벨의 크기가 같습니다.
구성 옵션
| 이름 | |
|---|---|
| backgroundColor |
차트의 기본 영역 배경색입니다. 간단한 HTML 색상 문자열(예: 유형: 문자열 또는 객체
기본값: 흰색
|
| 배경 색상.채우기 |
차트 채우기 색상이 HTML 색상 문자열로 표시됩니다. 유형: 문자열
기본값: 흰색
|
| 배경 색상.획 |
차트 테두리의 색상으로, HTML 색상 문자열입니다. 유형: 문자열
기본값: '#666'
|
| 배경 색상.획 너비 |
테두리 너비(픽셀)입니다. 유형: 숫자
기본값: 0
|
| 색상 축 |
색상 열 값과 색상 또는 그라데이션 스케일 간의 매핑을 지정하는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {minValue: 0, colors: ['#FF0000', '#00FF00']}
유형: 객체
기본값: null
|
| colorAxis.minValue |
있는 경우 차트 색상 데이터의 최솟값을 지정합니다. 이 값 이하의 색상 데이터 값은 유형: 숫자
기본값: 차트 데이터의 색상 열 최솟값입니다.
|
| colorAxis.maxValue |
있는 경우 차트 색상 데이터의 최댓값을 지정합니다. 이 값 이상의 색상 데이터 값은 유형: 숫자
기본값: 차트 데이터의 색상 열 최댓값
|
| colorAxis.values |
있는 경우 값이 색상과 연결되는 방식을 제어합니다. 각 값은 유형: 숫자 배열
기본값: null
|
| colorAxis.colors |
시각화의 값에 할당할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: 유형: 색상 문자열 배열
기본값: null
|
| 데이터가 없는 지역 색상 |
연결된 데이터가 없는 지역에 할당할 색상입니다. 유형: 문자열
기본값: '#F5F5F5'
|
| 기본 색상 |
위치(예: 유형: 문자열
기본값: '#267114'
|
| 디스플레이 모드 |
지역 차트의 유형입니다. DataTable 형식은 지정된 값과 일치해야 합니다. 다음과 같은 값이 지원됩니다.
유형: 문자열
기본값: 'auto'
|
| 나만의 |
지역 차트를 이 지역에서 서비스되고 있는 것처럼 표시합니다. 예를 들어 유형: 문자열
기본값: null
|
| enableRegionInteractivity 사용 설정 |
true인 경우 포커스와 마우스 오버 시 도움말 팁 상세 설정, 마우스 선택 시 기본값은 지역 모드에서 true이고 마커 모드에서 false입니다. 유형: 부울
기본값: 자동
|
| 강제 IFrame |
인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다. 유형: 부울
기본값: false
|
| 지역 차트 버전 |
GeoChart 테두리 데이터 버전입니다. 유형: 숫자
기본값: 10
|
| 높이 |
시각화의 높이입니다(픽셀 단위). 유형: 숫자
기본값: 자동
|
| 가로세로 비율 유지 |
true인 경우 차트가 자연스러운 가로세로 비율에 들어갈 수 있는 가장 큰 크기로 그려집니다.
false인 경우 지리정보 차트는 유형: 부울
기본값: true
|
| 전설 |
범례의 다양한 측면을 구성할 구성원이 있는 객체 또는 범례가 표시되지 않아야 하는 경우 '없음'입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {textStyle: {color: 'blue', fontSize: 16}}
유형: 객체/'없음'
기본값: null
|
| 범례.numberFormat |
숫자 라벨의 형식 문자열입니다. ICU 패턴 집합의 하위 집합입니다.
예를 들어 유형: 문자열
기본값: 자동
|
| 범례.textStyle |
범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| region |
지오차트에 표시할 영역입니다. (주변 지역도 표시됩니다.) 다음 중 하나일 수 있습니다.
유형: 문자열
기본값: 'world'
|
| 돋보기 |
돋보기의 다양한 측면을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {enable: true, zoomFactor: 7.5}
유형: 객체
기본값:
{enable: true, zoomFactor: 5.0} |
| 돋보기 글래스.사용 |
true인 경우 사용자가 어수선한 마커에 머무르면 돋보기가 열립니다. 참고: 이 기능은 SVG(Internet Explorer 버전 8 이하)를 지원하지 않는 브라우저에서는 지원되지 않습니다. 유형: 부울
기본값: true
|
| 돋보기Glass.zoomFactor |
돋보기의 확대/축소 배율입니다. 0보다 큰 숫자여야 합니다. 유형: 숫자
기본값: 5.0
|
| 마커 불투명도 |
마커의 불투명도로, 여기서 0.0은 완전히 투명하고 1.0은 완전히 불투명합니다. 유형: 숫자, 0.0~1.0
기본값: 1.0
|
| regioncoder 버전 |
리전코더 데이터의 버전입니다. 유형: 숫자
기본값: 0
|
| resolution |
지오차트 테두리의 해상도입니다. 다음 값 중 하나를 선택합니다.
유형: 문자열
기본값: '국가'
|
| 크기 축 |
값이 풍선 크기와 연결되는 방식을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {minValue: 0, maxSize: 20}
유형: 객체
기본값: null
|
| 크기Axis.maxSize |
가능한 풍선의 최대 반경(픽셀)입니다. 유형: 숫자
기본값: 12
|
| 크기Axis.maxValue |
유형: 숫자
기본값: 차트 데이터의 크기 열 최댓값
|
| sizeAxis.minSize |
가능한 가장 작은 풍선의 최소 반경(픽셀)입니다. 유형: 숫자
기본값: 3
|
| 크기 Axis.최소값 |
유형: 숫자
기본값: 차트 데이터의 크기 열 최솟값
|
| 도움말 |
다양한 도움말 요소를 구성하기 위한 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {textStyle: {color: '#FF0000'}, showColorCode: true}
유형: 객체
기본값: null
|
| tooltip.textStyle |
도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
도움말을 표시하는 사용자 상호작용:
유형: 문자열
기본값: '포커스'
|
| 너비 |
시각화의 너비(픽셀)입니다. 유형: 숫자
기본값: 자동
|
대륙 계층 및 코드
region 옵션을 다음 3자리 코드 중 하나로 설정하여 대륙/아대륙의 지역 차트를 표시할 수 있습니다. 코드와 계층 구조는 몇 가지 예외를 제외하고 UN 통계국에서 개발 및 유지하는 내용을 기반으로 합니다.
| 대륙 | 아대륙 | 국가 |
|---|---|---|
002 - 아프리카 |
015 - 북아프리카 |
DZ, EG, EH, LY, MA, SD, SS, TN |
011 - 서아프리카 |
BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, 2 2 2 2 2 | |
017 - 중앙아프리카 |
AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD | |
014 - 동아프리카 |
BI, DJ, ER, ET, KE, KM 11, 2, M, MU, M MU, M, M M, M, M, M | |
018 - 남아프리카 |
BW, LS, NA, SZ, ZA | |
150 - 유럽 |
154 - 북유럽 |
GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, 2{/22, 2 2, }{/11, 2 |
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, MT 팀 | |
019 - 미주 |
021 - 북아메리카 |
BM, CA, GL, PM, 미국 |
029 - 카리브해 |
을 확인해 주세요. | |
013 - 중앙아메리카 |
BZ, CR, GT, HN, MX, NI, PA, SV | |
005 - 남미 |
AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY{/212, 22 22 22 22 2 22 | |
142 - 아시아 |
143 - 중앙아시아 |
TM, TJ, KG, KZ, UZ |
030 - 동아시아 |
CN, HK, JP, KP, KR, MN, MO, TW | |
034 - 남아시아 |
AF, BD, BT, IN, IR, LK, MV, NP, PK | |
035 - 동남아시아 |
BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, VV2 | |
145 - 서아시아 |
을 확인해 주세요. | |
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) |
차트를 그립니다. 차트는 반환 유형: 없음
|
getImageURI() |
이미지 URI로 직렬화된 차트를 반환합니다. 차트를 그린 후에 이 메서드를 호출하세요. PNG 차트 인쇄를 참조하세요. 반환 유형: 문자열
|
getSelection() |
선택한 차트 항목의 배열을 반환합니다.
선택 가능한 항목은 할당된 값이 있는 리전입니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 항목은 할당된 값이 있는 리전입니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
이벤트
| 이름 | |
|---|---|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
ready |
차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
regionClick |
리전을 클릭하면 호출됩니다. '지역' 옵션에 할당된 특정 국가 (특정 국가가 나열된 경우)에서는 발생하지 않습니다.
속성: 단일 리전을 포함하는 객체입니다.
region은 클릭한 리전을 설명하는 ISO-3166 형식의 문자열입니다.
|
select |
사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
위치는 Google 지도에서 지오코딩됩니다. 지오코딩이 필요하지 않은 데이터는 어떠한 서버로도 전송되지 않습니다. 데이터 정책에 관한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.