GeoChart Google可视化不会在ASP.NET中显示某些国家/地区 [英] GeoChart Google Visualization not showing certain countries in ASP.NET

查看：114
本文介绍了GeoChart Google可视化不会在ASP.NET中显示某些国家/地区的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



1）转到< href =https://developers.google.com/chart/interactive/docs/gallery/geochart =nofollow> https://developers.google.com/chart/interactive/docs/gallery/geochart
$ b 2）将第一个GeoChart示例复制粘贴到桌面文件中

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

 < html> 
< head> 
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> 
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script> 
< script type =text / javascript> 
 google.charts.load（'current'，{'packages'：['geochart']}）; 
 google.charts.setOnLoadCallback（drawRegionsMap）; 
 
函数drawRegionsMap（）{
 
 var data = google.visualization.arrayToDataTable（[
 ['Country'，'Popularity']，
 [ '德国'，200]，
 ['美国'，300]，
 ['巴西'，400]，
 ['加拿大'，500]，
 [法国'，600]，
 ['RU'，700]，
 ['苏丹'，700]，
 ['南苏丹'，700] 
]）; 
 
 var options = {}; 
 
 var chart = new google.visualization.GeoChart（document.getElementById（'regions_div'））; 
 
 chart.draw（data，options）; 
} 
< / script> 
< / head> 
< body> 
< div id =regions_divstyle =width：900px; height：500px;>< / div> 
< / body> 
< / html>

有效

如果您双击HTML文件，上面的代码就可以工作，并且您会看到苏丹和南苏丹都显示为绿色。
我也可以确认这段代码可以在JSFiddle.net上运行。



与ASP.NET结合时不起作用



我检查了下面描述的问题出现在VS 2015更新3上的ASP.NET完全框架和ASP.NET Core上，选择的模板是空的还是MVC Web应用程序和.Net 4.5.1和4.6.1。空白模板是可以缩小问题范围的模板。



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



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

  ['South苏丹'，700]，
 
 ['科索沃'，700]，
 
 ['刚果民主共和国'，700]，
 
 ['Congo'，700]

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

解决方案

我注意到的东西。



如果您运行/刷新以下图表1 ，一遍又一遍，

看起来存在延迟填写'南苏丹'


它始终是填充颜色的最后一个



然而， ，如果使用 ISO 3166-1 alpha-2 代码 - 'SS'

填充颜色不会有任何延迟，如下面的图表2 所示。 可能尝试使用 'SS' '南苏丹'



测试图表



图1 - 'South Sudan' 



  google.charts.load（'current'，{callback：function（）{var data = google.visualization.arrayToDataTable（[['国家'，'人气']，['德国'，200]，['美国'，300]，['巴西'，400]，['加拿大'，500]，['法国'，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' c $ c 
 
 
 
 
 
  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]，//使用对象符号来修正工具提示[{v：'SS'，f ：'南苏丹'}，700]]）; var chart = new google.visualization.GeoChart（document.getElementById（'chart_div'））; chart.draw（数据）; }，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>

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?

解决方案

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>

这篇关于GeoChart Google可视化不会在ASP.NET中显示某些国家/地区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆