charts - 在地理图中显示状态

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>

一个国家:

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: '标记'

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>