Эта страница переведена с помощью Cloud Translation API.

Визуализация: GeoChart

Обзор
Геодиаграммы регионов
Маркерные геодиаграммы
Текстовые геодиаграммы
Раскрасьте свою диаграмму
Загрузка
Формат данных
Варианты конфигурации
Методы
События
Политика данных

Обзор

Геодиаграмма — это карта страны, континента или региона, на которой области обозначены одним из трех способов:

Режим региона окрашивает целые регионы, например страны, провинции или штаты.
В режиме маркеров кружки используются для обозначения областей, масштабируемых в соответствии с указанным вами значением.
В текстовом режиме регионы помечаются идентификаторами (например, «Россия» или «Азия»).

Геодиаграмма отображается в браузере с использованием 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 .

Например, вот карта Западной Европы с населением и территориями трех стран: Франции, Германии и Польши. Все население представляет собой абсолютные числа (например, 65 миллионов для Франции), но все площади представляют собой проценты от целого числа: маркер Франции окрашен в фиолетовый цвет, поскольку ее население является средним, но имеет размер 50 (из возможных 100), поскольку он содержит 50% общей площади.

В этом коде мы используем sizeAxis для указания размеров маркеров в диапазоне от 0 до 100. Мы также используем colorAxis со значениями RGB, чтобы показать популяции в виде диапазона цветов от оранжевого до синего — спектра, который будет хорошо работать для пользователей с недостатки цветового зрения. Наконец, мы указываем Западную Европу с 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>

Раскрасьте свою диаграмму

Существует несколько вариантов настройки цветов GeoCharts:

colorAxis : спектр цветов, используемый для регионов в таблице данных.
backgroundColor : цвет фона диаграммы.
datalessRegionColor : цвет, назначаемый регионам без связанных данных.
defaultColor : цвет, назначаемый областям в таблице данных, для которых значение равно null или не указано.

Параметр colorAxis является важным: он определяет диапазон цветов для значений ваших данных. В массиве colorAxis первый элемент — это цвет, присвоенный наименьшему значению в вашем наборе данных, а последний элемент — это цвет, присвоенный наибольшему значению в вашем наборе данных. Если вы укажете более двух цветов, между ними произойдет интерполяция.

В следующей диаграмме мы будем использовать все четыре варианта. colorAxis используется для отображения Африки цветами панафриканского флага с использованием широты стран: от красного на севере через черный до зеленого на юге. Параметр backgroundColor используется для окраски фона в светло-голубой цвет, datalessRegionColor для окраски неафриканских стран в светло-розовый цвет, а defaultColor для Мадагаскара.

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); };

Параметры

        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 .

Формат режима регионов

Местоположение вводится в один столбец плюс один необязательный столбец, как описано здесь:

Местоположение региона [ String, Обязательно ] — регион, который нужно выделить. Принимаются все следующие форматы. Вы можете использовать разные форматы в разных строках:
- Название страны в виде строки (например, «Англия») или код ISO-3166-1 альфа-2 в верхнем регистре или его английский текстовый эквивалент (например, «GB» или «Соединенное Королевство»).
- Кодовое имя региона ISO-3166-2 в верхнем регистре или его английский текстовый эквивалент (например, «US-NJ» или «New Jersey»).
- Код города . Это трехзначные коды метрополитена, используемые для обозначения различных регионов; Поддерживаются только коды США. Обратите внимание, что это не то же самое, что телефонные коды городов.
- Любое значение, поддерживаемое свойством 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»).
Размер текста [ Число, Необязательно ] Второй столбец — это необязательный числовой столбец, используемый для назначения размера метки. Если этот столбец отсутствует, все метки будут одинакового размера.

Варианты конфигурации

Имя
фоновый цвет	Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: `'red'` или `'#00cc00'` , либо объект со следующими свойствами. Тип: строка или объект По умолчанию: белый
фонЦвет.заливка	Цвет заливки диаграммы в виде цветовой строки HTML. Тип: строка По умолчанию: белый
фонЦвет.обводка	Цвет границы диаграммы в виде цветовой строки HTML. Тип: строка По умолчанию: '#666'
backgroundColor.strokeWidth	Ширина границы в пикселях. Тип: номер По умолчанию: 0
цветОсь	Объект, определяющий сопоставление между значениями столбца цвета и цветами или шкалой градиента. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {minValue: 0, colors: ['#FF0000', '#00FF00']} Тип: объект По умолчанию: ноль
colorAxis.minValue	Если присутствует, указывает минимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и ниже будут отображаться как первый цвет в диапазоне `colorAxis.colors` . Тип: номер По умолчанию: минимальное значение столбца цвета в данных диаграммы.
цветAxis.maxValue	Если присутствует, указывает максимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и выше будут отображаться как последний цвет в диапазоне `colorAxis.colors` . Тип: номер По умолчанию: максимальное значение столбца цвета в данных диаграммы.
colorAxis.values	Если присутствует, управляет тем, как значения связаны с цветами. Каждое значение связано с соответствующим цветом в массиве `colorAxis.colors` . Эти значения применяются к данным цвета диаграммы. Окраска производится согласно градиенту указанных здесь значений. Отсутствие указания значения для этой опции эквивалентно указанию [minValue, maxValue]. Тип: массив чисел По умолчанию: ноль
colorAxis.colors	Цвета для назначения значениям в визуализации. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: `colorAxis: {colors:['red','#004411']}` . У вас должно быть как минимум два значения; градиент будет включать в себя все ваши значения, а также вычисленные промежуточные значения, причем первый цвет будет наименьшим значением, а последний цвет — самым высоким. Тип: массив цветных строк. По умолчанию: ноль
без данныхРегионЦвет	Цвет, который нужно назначить регионам, не имеющим связанных данных. Тип: строка По умолчанию: '#F5F5F5'
по умолчаниюЦвет	Цвет, который будет использоваться для точек данных на географической диаграмме, когда местоположение (например, `'US'` ) присутствует, но значение равно `null` или не указано. Это отличается от `datalessRegionColor` , который используется при отсутствии данных. Тип: строка По умолчанию: '#267114'
Режим отображения	Что это за тип геодиаграммы? Формат DataTable должен соответствовать указанному значению. Поддерживаются следующие значения: «авто» — выберите в зависимости от формата DataTable. «регионы» — раскрасьте регионы на геодиаграмме. 'маркеры' - Размещайте маркеры в регионах. «текст» — пометьте регионы текстом из DataTable. Тип: строка По умолчанию: «авто»
домен	Покажите геодиаграмму так, как будто она обслуживается из этого региона. Например, если установить `domain` `'IN'` Кашмир будет отображаться как принадлежащий Индии, а не как спорная территория. Тип: строка По умолчанию: ноль
ВключитьРегионИнтерактивность	Если это правда, включите интерактивность региона, включая фокусировку и разработку подсказок при наведении курсора мыши, а также выбор региона и запуск событий `regionClick` и `select` при щелчке мыши. Значение по умолчанию — true в режиме региона и false в режиме маркера. Тип: логический По умолчанию: автоматический
сила IFrame	Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь
geochartVersion	Версия данных границы GeoChart. Доступны версии `10` и `11` . Тип: номер По умолчанию: 10
высота	Высота визуализации в пикселях. Высота по умолчанию составляет 347 пикселей, если не указана опция `width` и для `keepAspectRatio` установлено значение true — в этом случае высота рассчитывается соответствующим образом. Тип: номер По умолчанию: авто
сохранять пропорции	Если это правда, геодиаграмма будет нарисована в наибольшем размере, который может поместиться внутри области диаграммы, с ее естественным соотношением сторон. Если указан только один из вариантов `width` и `height` , другой будет рассчитан в соответствии с соотношением сторон. Если установлено значение false, геодиаграмма будет растянута до точного размера диаграммы, указанного в параметрах `width` и `height` . Тип: логический По умолчанию: правда
легенда	Объект с элементами для настройки различных аспектов легенды или «нет», если легенда не должна отображаться. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {textStyle: {color: 'blue', fontSize: 16}} Тип: Объект / «нет» По умолчанию: ноль
легенда.numberFormat	Строка формата для числовых меток. Это подмножество набора шаблонов ICU . Например, `{numberFormat:'.##'}` будет отображать значения «10,66», «10,6» и «10,0» для значений 10,666, 10,6 и 10. Тип: строка По умолчанию: авто
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>}`
область	Область для отображения на геокарте. (Также будут отображены прилегающие территории.) Может быть одним из следующих: «мир» — геокарта всего мира. Континент или субконтинент, указанный трехзначным кодом , например «011» для Западной Африки. Страна, указанная кодом ISO 3166-1 альфа-2 , например «AU» для Австралии. Штат в США, указанный по коду ISO 3166-2:US , например «US-AL» для Алабамы. Обратите внимание, что для параметра `resolution` должно быть установлено значение «провинции» или «метро». Тип: строка По умолчанию: «мир»
увеличительное стекло	Объект с элементами для настройки различных аспектов увеличительного стекла. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {enable: true, zoomFactor: 7.5} Тип: Объект По умолчанию: `{enable: true, zoomFactor: 5.0}`
увеличительное стекло.enable	Если это правда, то когда пользователь задерживается на загроможденном маркере, откроется лупа. Примечание. Эта функция не поддерживается в браузерах, не поддерживающих SVG , например Internet Explorer версии 8 или более ранней. Тип: логический По умолчанию: правда
увеличительное стекло.zoomFactor	Коэффициент масштабирования увеличительного стекла. Может быть любое число больше 0. Тип: номер По умолчанию: 5.0
маркерНепрозрачность	Непрозрачность маркеров, где 0,0 — полностью прозрачен, а 1,0 — полностью непрозрачен. Тип: число, 0,0–1,0 По умолчанию: 1,0
регионкодерверсия	Версия данных регионакодера. Доступны версии `0` и `1` . Тип: номер По умолчанию: 0
разрешение	Разрешение границ геокарты. Выберите одно из следующих значений: «страны» — поддерживается для всех регионов, кроме штатов США. «Провинции» — поддерживается только для регионов страны и регионов штатов США. Поддерживается не для всех стран; пожалуйста, проверьте страну, чтобы узнать, поддерживается ли эта опция. «метро» — поддерживается только для региона страны и штата США. Тип: строка По умолчанию: «страны»
размерОсь	Объект с элементами для настройки связи значений с размером пузырька. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {minValue: 0, maxSize: 20} Тип: объект По умолчанию: ноль
sizeAxis.maxSize	Максимальный радиус максимально возможного пузырька в пикселях. Тип: номер По умолчанию: 12
sizeAxis.maxValue	Значение размера (как показано в данных диаграммы), которое должно быть сопоставлено с `sizeAxis.maxSize` . Большие значения будут обрезаны до этого значения. Тип: номер По умолчанию: максимальное значение столбца размера в данных диаграммы.
sizeAxis.minSize	Минимальный радиус наименьшего возможного пузырька в пикселях. Тип: номер По умолчанию: 3
sizeAxis.minValue	Значение размера (как показано в данных диаграммы), которое должно быть сопоставлено с `sizeAxis.minSize` . Меньшие значения будут обрезаны до этого значения. Тип: номер По умолчанию: минимальное значение столбца размера в данных диаграммы.
подсказка	Объект с членами для настройки различных элементов подсказки. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль
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>}`
подсказка.триггер	Взаимодействие пользователя, вызывающее отображение всплывающей подсказки: «Фокус» — всплывающая подсказка будет отображаться, когда пользователь наводит курсор на элемент. «нет» — всплывающая подсказка не будет отображаться. «выбор» — всплывающая подсказка будет отображаться, когда пользователь выбирает элемент. Тип: строка По умолчанию: «фокус»
ширина	Ширина визуализации в пикселях. Ширина по умолчанию составляет 556 пикселей, если не указана опция `height` и для `keepAspectRatio` установлено значение true — в этом случае ширина рассчитывается соответствующим образом. Тип: номер По умолчанию: авто

Континентальная иерархия и коды

Можно отображать геокарты континентов/субконтинентов, установив для параметра region один из следующих трехзначных кодов. Коды и иерархия, за некоторыми исключениями, основаны на кодах, разработанных и поддерживаемых Статистическим отделом Организации Объединенных Наций .

Континент	Субконтинент	Страны
`002` – Африка	`015` – Северная Африка	ДЗ , ЭГ , ЭХ , ЛИ , МА , СД , СС , ТН
	`011` – Западная Африка	BF , BJ , CI , CV , GH , GM , GN , GW , LR , ML , MR , NE , NG , SH , SL , SN , TG
	`017` – Средняя Африка	АО , CD , ZR , CF , CG , CM , GA , GQ , ST , TD
	`014` – Восточная Африка	BI , DJ , ER , ET , KE , KM , MG , MU , MW , MZ , RE , RW , SC , SO , TZ , UG , YT , ZM , ZW
	`018` – Южная Африка	BW , LS , NA , SZ , ZA
`150` – Европа	`154` - Северная Европа	GG , JE , AX , DK , EE , FI , FO , GB , IE , IM , IS , LT , LV , NO , SE , SJ
	`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` — Южная Европа	АД , АЛ , БА , ЭС , ГИ , ГР , ХР , ИТ , МЭ , МК , МТ , РС , ПТ , СИ , СМ , ВА , Ю
`019` – Америка	`021` – Северная Америка	БМ , Калифорния , ГЛ , ПМ , США
	`029` – Карибский бассейн	AG , AI , AN , AW , BB , BL , BS , CU , DM , DO , GD , GP , HT , JM , KN , KY , LC , MF , MQ , MS , PR , TC , TT , VC , VG , VI
	`013` – Центральная Америка	БЗ , CR , GT , HN , MX , NI , PA , SV
	`005` – Южная Америка	AR , BO , BR , CL , CO , EC , FK , GF , GY , PE , PY , SR , UY , VE
`142` - Азия	`143` - Средняя Азия	ТМ , ТДж , КГ , КЗ , УЗ
	`030` – Восточная Азия	Китай , Гонконг , Япония , КП , КР , Миннесота , Миссури , ТВ
	`034` – Южная Азия	АФ , БД , БТ , ИН , ИК , ЛК , МВ , НП , ПК
	`035` – Юго-Восточная Азия	БН , ID , КХ , ЛА , ММ , БУ , МОЙ , PH , SG , TH , TL , ТП , ВН
	`145` - Западная Азия	AE , AM , AZ , BH , CY , GE , IL , IQ , JO , KW , LB , OM , PS , QA , SA , NT , SY , TR , YE , YD
`009` – Океания	`053` – Австралия и Новая Зеландия	Австралия , Новая Зеландия , Новая Зеландия
	`054` - Меланезия	ФДж , НК , ПГ , СБ , ВУ
	`057` – Микронезия	ФМ , ГУ , КИ , МХ , МП , НР , ПВ
	`061` – Полинезия	АС , СК , НУ , ПФ , ПН , ТК , ТО , ТВ , ВФ , WS

Методы

Метод
`clearChart()`	Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет
`draw(data, options)`	Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события `ready` . `Extended description` . Тип возврата: нет
`getImageURI()`	Возвращает диаграмму, сериализованную как URI изображения. Вызовите это после того, как диаграмма будет нарисована. См. Печать диаграмм PNG . Тип возвращаемого значения: строка
`getSelection()`	Возвращает массив выбранных объектов диаграммы. Выбираемые объекты — это регионы с присвоенным значением. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. `Extended description` . Тип возвращаемого значения: Массив элементов выбора.
`setSelection()`	Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемые объекты — это регионы с присвоенным значением. Для этой диаграммы одновременно можно выбрать только одну сущность. `Extended description` . Тип возврата: нет

События

Имя
`error`	Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение
`ready`	Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода `draw` и вызывать их только после того, как событие было запущено. Свойства: нет
`regionClick`	Вызывается при щелчке по региону. Это не будет выдано для конкретной страны, указанной в опции «регион» (если конкретная страна была указана). Свойства: объект с единственным свойством, `region` , который представляет собой строку в формате ISO-3166, описывающую выбранную область.
`select`	Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите `getSelection()` . Свойства: нет

Политика данных

Местоположение геокодируется с помощью Google Maps. Любые данные, не требующие геокодирования, не отправляются ни на один сервер. Дополнительную информацию об их политике в отношении данных см. в Условиях использования Карт Google .