Question

我正在显示状态级别的GeoChart。使用巴西地区进行配置时，如下所示，但不能使用州代码，例如：BR-SP

google.load('visualization', '1', {
  'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['State', 'Views'],
    ['BR-AL', 300],
    ['BR-SP', 300],
    ['BR-RJ', 400]

  ]);

  var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  var options = {
    region: 'BR',
    resolution: 'provinces',
    width: 800,
    height: 600,
    colorAxis: {
      colors: ['#acb2b9', '#2f3f4f']
    }
  };

  geochart.draw(data, options);

}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Níveladeestado：

google.load('visualization', '1', {
  'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['State', 'Views'],
    ['Sao Paulo', 300],
    ['Campinas', 300],

  ]);

  var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  var options = {
    region: 'BR-SP',
    width: 800,
    height: 600,
    colorAxis: {
      colors: ['#acb2b9', '#2f3f4f']
    }
  };

  geochart.draw(data, options);

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Answer 1

您似乎无法使用options.displayMode: 'regions'在子区域（例如坎皮纳斯）划分国家/地区（例如圣保罗），但您可以将其显示为options.displayMode: 'markers'

的标记

google.load('visualization', '1', {
  'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['State', 'Views'],
    ['São Paulo', 300],
    ['Campinas', 200],
    ['Araras', 400],
    ['Buri', 100],

  ]);

  var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  var options = {
    region: 'BR',
    displayMode: 'markers',
    resolution: 'provinces',
    width: 800,
    height: 600,
    colorAxis: {
      colors: ['#acb2b9', '#2f3f4f']
    }
  };

  geochart.draw(data, options);

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Answer 2

问题来自您的options.region

var options = {
    region: 'BR-SP',
    width: 800,
    height: 600,
    colorAxis: {
      colors: ['#acb2b9', '#2f3f4f']
    }
}

区域子代码似乎不被允许。根据{{3}}，区域代码只能是

要在地图上显示的区域。（也会显示周围区域。）可以是国家代码（大写ISO-3166格式），也可以是以下字符串之一：...

如果您查看Configuration Options，则不会包含BR-SP，因为它不是细分，并且没有附加数字代码（Wikipedia Article List of Country Codes）。

如果您将区域更改为BR它将会正常工作，但不幸的是，您似乎无法进一步放大。

查看https://en.wikipedia.org/wiki/ISO_3166-2:BR（开源替代方案）。您可以使用GeoJSON设置区域，然后执行自己的缩放级别。

在geochart中显示状态

2 个答案: