Question

有一个我很难解决的错误，但我设法将其缩小到可以复制的简单步骤。

1）转到https://developers.google.com/chart/interactive/docs/gallery/geochart

2）将第一个GeoChart示例复制粘贴到桌面文件

中

3）添加国家苏丹和南苏丹并将文件另存为mygeochart.html

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

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

        var options = {};

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

什么有用

如果您双击HTML文件，上述代码将起作用，您将看到苏丹和南苏丹都以绿色显示。我还可以确认此代码适用于JSFiddle.net。

与ASP.NET结合使用时不起作用

我检查了下面描述的问题发生在ASP.NET Full框架和VS 2015更新3上的ASP.NET Core中，无论选择的模板是空的还是MVC Web应用程序以及.Net 4.5.1和4.6.1 。空模板是允许您缩小问题范围的模板。

只需创建一个空项目并将上述HTML文件放在解决方案文件夹中，运行网站并转到该页面 http://localhost:xxxxx/mygeochart.html

除了南苏丹之外，页面将正确显示，南苏丹仍然是白色的，好像没有数据一样。我在生产网站上遇到了这个问题，下面的国家也有这个问题。

  ['South Sudan', 700],

  ['Kosovo', 700],

  ['Democratic Republic of the Congo', 700],

  ['Congo', 700]

如果双击HTML文件，这些国家/地区看起来非常好，但是当包含在ASP.NET项目中时，它们不会显示。我检查了这个错误发生在Firefox，IE，EDGE和Chrome浏览器上，并且遵循WhiteHat的建议，无论谷歌可视化版本（“当前”，“即将推出”和版本“41”到“45”），也会发生错误。我们在生产网站上运行GeoChart，但我们很难解决这个问题。有什么想法吗？

Answer 1

我注意到了一些事情。

如果你一遍又一遍地运行/刷新以下图表1 ，
填写'South Sudan'时，似乎有延迟它始终是最后填充颜色

但是，如果使用ISO 3166-1 alpha-2代码 - 'SS'
填充颜色时没有延迟，如下面的图表2 。

也许可以尝试使用 'SS' 代替 'South Sudan'

测试图表

图表1 - 'South Sudan'

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700],
      ['Sudan', 700],
      ['South Sudan', 700]
    ]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['geochart']
});

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

图表2 - 'SS'

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700],
      ['Sudan', 700],

      // use object notation to correct tooltip
      [{v: 'SS', f: 'South Sudan'}, 700]
    ]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['geochart']
});

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

GeoChart Google Visualization未在ASP.NET中显示某些国家/地区

1 个答案: