Google Geochart: выделение по континентам и странам (несколько разрешений)

Question

Я хотел бы создать диаграмму Google, в которой выделены разные регионы, континенты или страны, основанные на определенной группе.

Проблема в том, что я не могу понять, как лучше всего показать continents и countries.

Например, я хотел бы иметь две выделенные записи: Европа и Япония.

Я могу использовать приведенный ниже код JS, чтобы попытаться это сделать:

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

var data = google.visualization.arrayToDataTable([
    ['Region', 'Label', {role: 'tooltip', p:{html:true}}],
    ['150', 1, 'Europe'],
    ['Japan', 2, 'Japan']
]);

var options = {
    resolution: 'continents',
}
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, options);
};

Приведенный выше код частично работает - Европа правильно выделена и помечена. Однако, поскольку resolution установлен на 'continents' Япония не выделяется. Если я установлю resolution на 'countries', возникнет противоположная проблема.

Итак, настоящий вопрос:

Есть ли способ выделить Европу и Японию по отдельности, используя по одной записи в массиве, или мне нужно включить каждую европейскую страну в список, чтобы выделить Японию?

Answer 1

да, вам нужно включить каждую европейскую страну в список, чтобы Япония также выделила

другой вариант - нарисовать две диаграммы, одна поверх другой,
используя следующие параметры конфигурации, чтобы нижний показывать через.

backgroundColor: 'transparent',
datalessRegionColor: 'transparent',

однако, это подавит всплывающую подсказку на нижнем графике.

см. Следующий рабочий фрагмент для примера ...

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

function drawChart() {
  var data1 = google.visualization.arrayToDataTable([
    ['Region', 'Label', {role: 'tooltip', p:{html:true}}],
    ['150', 1, 'Europe']
  ]);

  var options1 = {
    backgroundColor: 'transparent',
    datalessRegionColor: 'transparent',
    resolution: 'continents'
  }

  var geochart1 = new google.visualization.GeoChart(
    document.getElementById('visualization1')
  );
  geochart1.draw(data1, options1);

  var data2 = google.visualization.arrayToDataTable([
    ['Region', 'Label', {role: 'tooltip', p:{html:true}}],
    ['Japan', 2, 'Japan']
  ]);

  var options2 = {
    backgroundColor: 'transparent',
    datalessRegionColor: 'transparent',
    resolution: 'countries'
  }

  var geochart2 = new google.visualization.GeoChart(
    document.getElementById('visualization2')
  );
  geochart2.draw(data2, options2);
}

.geo {
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="geo" id="visualization1"></div>
<div class="geo" id="visualization2"></div>

note: jsapi больше не должен использоваться для загрузки библиотеки диаграмм,
согласно примечаниям к выпуску ...

Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется последовательно. Последнее обновление в целях безопасности было с предварительной версией v45. Пожалуйста, используйте новый gstatic loader.js с этого момента.

это только изменит оператор load, см. Фрагмент выше ...