2013-01-10 33 views
2

我想在Google GeoCharts中按國家/地區顯示記錄數量。Google圖表中的用戶指定區域和國家/地區收藏

但是我們的國家分組與GeoCharts使用的不同。

如谷歌使用了聯合國:

  • 北美
  • 中美洲
  • 南美
  • 加勒比海

爲細分爲美國。我們的數據集分爲:

  • 北美
  • 拉丁美洲

阻抗爆炸!

正如我所見,這意味着當南美洲被點擊拉丁美洲時,用戶失去了墨西哥的視線。美國圖表太高而且太薄,所以必須縮小太大以至於無法使用。

改變我們的數據分類法,分配給一個地區的國家是非常痛苦的。

我可以在GeoChart中設置用戶定義的區域嗎?指定要顯示的地圖中心,縮放級別和國家/地區的數據?

我敢說盛大的黑客可以做到這一點,但與Goggle的GeoChart代碼不同步並不是一個好主意。

我已經看過新的amMaps,但這似乎不是IE7 & 8兼容。

<shakefist at="Microsoft">Argh!</shakefist> 

歡呼

回答

3

不幸的是,沒有你不能。你可以選擇美國,北美,加勒比或南美,但不是「拉丁美洲」。你可以做的是創建一個縮放地圖,在那裏你顯示美國,它會放大點擊區域。實際上,你需要有國家數據以及區域中的數據,或者只是有標記數據,如果這是你的事,但這裏的點擊放大的例子:

<!-- 
You are free to copy and use this sample in accordance with the terms of the 
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) 
--> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Google Visualization API Sample</title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    google.load('visualization', '1', {packages: ['geochart']}); 

    var width, height, selectedRegion, resolution; 

    window.onload = function(){ 
     width = 556; 
     height = 400; 
     selectedRegion = 'world'; 
     resolution = 'subcontinents'; 
    }; 

    function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Region'); 
     data.addColumn('number', 'Value'); 
     data.addRows([ 
     [{v:"005", f:"South America"}, 978.7], 
     [{v:"011", f:"Western Africa"}, 46], 
     [{v:"013", f:"Central America"}, 299], 
     [{v:"014", f:"Eastern Africa"}, 63.9], 
     [{v:"015", f:"Northern Africa"}, 255.7], 
     [{v:"017", f:"Middle Africa"}, 21.4], 
     [{v:"018", f:"Southern Africa"}, 244.5], 
     [{v:"029", f:"Caribbean"}, 76.5], 
     [{v:"030", f:"Eastern Asia"}, 5712.9], 
     [{v:"034", f:"Southern Asia"}, 1275.1], 
     [{v:"035", f:"South-Eastern Asia"}, 639.2], 
     [{v:"039", f:"Southern Europe"}, 777.8], 
     [{v:"053", f:"Australia and New Zealand"}, 272], 
     [{v:"054", f:"Melanesia"}, 6.3], 
     [{v:"057", f:"Micronesia"}, 1.8], 
     [{v:"061", f:"Polynesia"}, 1], 
     [{v:"143", f:"Central Asia"}, 170.3], 
     [{v:"145", f:"Western Asia"}, 834.1], 
     [{v:"151", f:"Eastern Europe"}, 1587.6], 
     [{v:"154", f:"Northern Europe"}, 801.5], 
     [{v:"155", f:"Western Europe"}, 1456.2], 
     [{v:"021", f:"Northern America"}, 4704.1] 
     ]); 

     var options = { 
     displayMode: 'regions', 
     enableRegionInteractivity: 'true', 
     resolution: resolution, 
     region: selectedRegion, 
     height: height, 
     width: width 
     }; 

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

     google.visualization.events.addListener(geochart, 'select', function() { 
     var selection = geochart.getSelection(); 

     if (selection.length == 1) { 
      var selectedRow = selection[0].row; 
      selectedRegion = data.getValue(selectedRow, 0); 
      resolution = "countries"; 
      options.region = selectedRegion; 
      options.resolution = resolution; 
      //alert(resolution); 
      geochart.draw(data, options); 
      } 
     }); 

     geochart.draw(data, options); 
    } 

    google.setOnLoadCallback(drawVisualization); 
    </script> 
</head> 
<body style="font-family: Arial;border: 0 none;"> 
<div id="visualization"></div> 
</body> 
</html> 

複製並粘貼到谷歌遊樂場(我不不知道爲什麼這不會在jsfiddle上工作,我認爲它與window.onload有關)。

+0

謝謝,很高興看到你在你的例子中使用了f,v(格式,值)鍵。 這是一個棘手的問題,我不知道許多數據集很容易在聯合國指導方針中分解。 其他問題是土耳其在歐洲還是亞洲?俄羅斯跨越歐洲和亞洲。新加坡是不是太尖銳,不能被選中? 我沒有完全意識到映射到GeoChart的問題;谷歌雖然做得很好。 – zeristor

+3

JSFiddle for this here http://jsfiddle.net/E9LxK/ – mhawksey

相關問題