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

【问题标题】：GeoChart Google Visualization not showing certain countries in ASP.NETGeoChart Google Visualization 未在 ASP.NET 中显示某些国家/地区
【发布时间】：2016-07-13 08:30:50
【问题描述】：

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

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 结合使用时什么不起作用

我检查了下面描述的问题是否出现在 VS 2015 更新 3 上的 ASP.NET Full framework 和 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，但我们很难解决这个问题。有什么想法吗？

【问题讨论】：

除了'current' 之外，您是否尝试过任何其他谷歌可视化版本？ -- 你可以试试'41' 到'45'
嗨 WhiteHat，感谢您的回答，我真的很想完成这项工作。我听从了你的建议，从 41 到 45，不幸的是它不起作用。

标签： javascript html asp.net google-visualization

【解决方案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>

【讨论】：

WhiteHat，这行得通，非常感谢！我有工具提示现在显示 SS 的问题；有没有一种简单的方法可以让 API 输入全名？更重要的是，您认为会发生什么？
干杯！要更正工具提示，请使用对象表示法来提供值 (v:) 和格式化值 (f:)，请参阅上面对 图表 2 的编辑 -- 不知道为什么会发生这种情况，只是注意到延迟。我建议对所有条目使用 alpha 代码...
感谢工具提示上的对象符号的简洁解决方案，它有效。我会将您的解决方案链接到 GitHub，因为它似乎与另一个问题有关。