google-visualization - 在同一张 map 中显示多个谷歌图表区域

标签 google-visualization

我正在创建一个谷歌地理图表,其中包括美国、韩国、台湾、中国和印度的城市。如果我使用 regions: 'world' tshe map 太大,城市气泡几乎看不到。我正在使用以下选项:

var options = {
  region: 'world',
  displayMode: 'markers',
  resolution: 'provinces'
}

是否可以创建包含两个或多个区域的 map ?

例如,美国和亚洲。我正在考虑使用以下内容设置区域:
var options = {
  region: '019','142',
  displayMode: 'markers',
  resolution: 'provinces'
}

最佳答案

不,不可能在同一张 map 上创建包含两个区域的 map 。

原因是 Google 地理图表依赖于它们显示的任何区域的 SVG 图像,并且 API 中存在数量有限的 SVG map (这就是为什么有些国家不使用 resolution: 'provinces' 的原因)。

但是,可以创建包含两个区域数据的数据表,并使用相同的数据表填充两个单独的 map (每个区域一个)。

例如:

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google Visualization API Sample</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['geochart']});

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

        // Draw First Chart
        var geochart = new google.visualization.GeoChart(
          document.getElementById('visualization'));
        geochart.draw(data, {width: 556, height: 347, region: '019', resolution: 'countries'});

        // Draw Second Chart
        var geochart2 = new google.visualization.GeoChart(
          document.getElementById('visualization2'));
        geochart2.draw(data, {width: 556, height: 347, region: '150', resolution: 'countries'});
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization"></div>
    <div id="visualization2"></div>
  </body>
</html>

另请注意,“美洲”区域(019)与世界地图一样高,实际上不会为您节省“世界”上的任何空间。如果加拿大或墨西哥没有任何标记,我建议使用北美或仅使用“美国”。

关于google-visualization - 在同一张 map 中显示多个谷歌图表区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16556121/

相关文章:

javascript - 我的气泡图远远超过了 maxValue,低于 minValue

jquery - 更改 Google 图表中图表范围过滤器的值

javascript - 谷歌饼图显示小切片外部的切片文本

javascript - 如何动态添加格式化的刻度?

php - Google Chart Area 不显示 mysql 数据库

javascript - PhantomJs 保存谷歌图表 API GeoChart 的 png 图像

html - Google 图表 - 如何在不增加图表大小的情况下减少绘图面积

javascript - Google TreeMap 填充值设置为 _ABSTRACT_RENDERER_ID_1

javascript - 错误 : First row is not an array. Google 饼图

javascript - 谷歌图表,如何在语音气泡中显示额外信息