GeoChart Google Visualization not showing certain countries in ASP.NET

问题

There is a bug which is hard for me to solve, but I managed to narrow it down to simple steps that can be reproduced.

1) Go to https://developers.google.com/chart/interactive/docs/gallery/geochart

2) Copy paste the first GeoChart example in a file in the desktop

3) Add the country Sudan and South Sudan and save the file as 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>

What works

The above code will work if you double click the HTML file, and you will see that both Sudan and South Sudan are visible in green. I can also confirm that this code works on JSFiddle.net.

What does not work when combining with ASP.NET

I checked that the issue described below occurs in ASP.NET Full framework and ASP.NET Core on VS 2015 update 3, whether the chosen template is empty or an MVC web application and for .Net 4.5.1 and 4.6.1. The empty template is the one which allows you to narrow down the issue.

Simply create one empty project and put the above HTML file in the solution folder, run the website and go to the page http://localhost:xxxxx/mygeochart.html

The page will display correctly except for South Sudan, which remains white as if it had no data. I am facing this problem on a production website and the countries below have this problem, too.

  ['South Sudan', 700],

  ['Kosovo', 700],

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

  ['Congo', 700]

These countries appear very well if you double click the HTML file, but will not show up when included in ASP.NET projects. I checked that this bug occurs on Firefox, IE, EDGE and Chrome browsers and, following WhiteHat's suggestion, the bug also occurs regardless of google-visualization versions ('current', 'upcoming' and versions '41' through '45'). We are running the GeoChart on a production website but it is hard for us to solve this issue. Any idea?

回答1:

something I noticed.

if you run / refresh the following Chart 1, over and over,
it appears there is a delay when filling in 'South Sudan'
it is consistently the last to fill color

however, if the ISO 3166-1 alpha-2 code is used -- 'SS'
there is no delay when filling the color, as in Chart 2 below.

maybe try using 'SS' instead of 'South Sudan'

test charts...

Chart 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>

Chart 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>

来源：https://stackoverflow.com/questions/38346452/geochart-google-visualization-not-showing-certain-countries-in-asp-net

标签

javascript

html

ASP.NET

google-visualization