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>

注释： jsapi不应再用于加载图表库，
根据发行说明...

通过jsapi加载程序仍然可用的Google Charts版本不再被一致更新。为了安全起见，最近的更新是v45的预发行版。从现在开始，请使用新的静态loader.js。

这只会更改load语句，请参见上面的片段...

Google Geochart：按洲和国家/地区突出显示（多种分辨率）

1 个答案: