加拿大省份未在反应 google 图表的地理图中标记

Question

我正在尝试通过地理图表在 React google 图表中显示加拿大的省份。但是即使省份对应的 abv 是正确的，省份也不会突出显示。但是 "population%" 的值显示在图表中（图表底部的栏）

下面是我的代码。

 <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" 作为数据来尝试相同的代码时，它工作得很好！

这里有什么我遗漏的吗？无法弄清楚我做错了什么。

谢谢

Answer 1

option --> resolution: "provinces" -- 使省份outlined
在加拿大应该可以正常工作 --> region: "CA"

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

请参阅以下工作片段...

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>

加拿大省份未在反应 google 图表的地理图中标记

Canadian provinces not being marked in geochart of react google charts

charts

google-visualization

region

reactjs