加拿大省份未在反应谷歌图表的地理图中标记答案

【问题标题】：Canadian provinces not being marked in geochart of react google charts加拿大省份未在反应谷歌图表的地理图中标记
【发布时间】：2019-10-23 16:41:41
【问题描述】：

我正在尝试通过 geochart 在 react google 图表中显示加拿大的省份。但是即使对应省份的abv正确，省份也不会突出显示。但是“人口百分比”的值显示在图表中（图表底部的条形图）

下面是我的代码。

 <Chart
        width={"100%"}
        height={"100%"}
        chartType="GeoChart"
        data={[
          ["abv", "population%"],
          ["AB", 2],
          ["NS", 3]
        ]}
        mapsApiKey={GOOGLE_API_KEY}
        //rootProps={{ "data-testid": "1" }}
        options={{
          region: "CA",
          resolution: "provinces"
        }}
      />

但是当我通过为地区和美国省份提供"US" 作为数据来尝试相同的代码时，它工作得非常好！

这里有什么我想念的吗。无法弄清楚我做错了什么。

谢谢

【问题讨论】：

@WhiteHat 感谢您指出这一点。所以根据文档我应该指定“国家”来解决，对吗？ 'countries' - Supported for all regions, except for US state regions. 但这也没有用。你有什么想法吗？
@WhiteHat 是的，所有省份都得到了概述
"该选项运行良好" 从某种意义上说运行良好？ 'provinces' 如果区域是“CA”，则无法指定解析，对吗？我将分辨率更改为 'countries' 。检查！控制台没有错误！并且它可能是 api 密钥的问题，因为区域“美国”工作正常。

标签： reactjs charts google-visualization region

【解决方案1】：

选项 --> resolution: "provinces" -- 使省份被概述
并且应该可以在加拿大工作-> region: "CA"

为了突出一个省，
在 abv 前面加上 --> "CA-" -- 如 --> "CA-AB"

请参阅以下工作 sn-p...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ["abv", "population%"],
    ["CA-AB", 2],
    ["CA-NS", 3]
  ]);

  var options = {
    region: "CA",
    resolution: "provinces",
    colors: ['blue', 'green']
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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

【讨论】：

谢谢，你帮我省了很多麻烦！！