Google-Diagramm, das Axis nicht zeigt?

Question

Ich habe heute morgen mit Google Geo Chart herumgesprochen, und während ich es größtenteils funktioniere, zeigt es nicht die Achse unten an. Es zeigt auch nicht das Land in der Tooltip beim Hover. Ich verwende ist

Der Code:

<script type="text/javascript"> 
    function mapMe() { 
     google.charts.load('upcoming', {'packages':['geochart']}); 
     google.charts.setOnLoadCallback(drawRegionsMap); 

     function drawRegionsMap() { 
     arr = myParse();   
     var data = google.visualization.arrayToDataTable(arr); 

     var options = {colorAxis: {colors: ['#f5f5f5','#267114']}}; 
     var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 

     chart.draw(data, options); 
     } 
    } 
</script> 
<div class='container'> 
    <div id="regions_div" style="width: 900px; height: 500px;"></div> 
     <br><br><br><textarea rows="4" cols="50" id="testArea"></textarea> 
     <button onclick='mapMe()'> 
</div> 

..und die Funktion für das Array genannt ist:

function myParse() { 
    var data = $('#testArea').val(); 
    var rows = data.split("\n"); 
    var result = []; 
    var col = []; 
    for (var r in rows) { 
     row = rows[r].split("\t"); 
     result.push(row); 
    } 
    return result; 
} 

Das Ergebnis:

Die Daten I Die Eingabe wird aus Excel kopiert und in einen Textbereich eingefügt. Es sieht so aus:

|Country|Number| 
|Russia |1  | 
..etc 

Fehle ich etwas albern? Kann es einfach nicht herausfinden. Jede Hilfe wird sehr geschätzt!

Answer 1

meinen Ansatz geändert und habe es funktioniert, wenn auch nicht in der Art, wie ich ursprünglich gedacht:

function mapMe() { 

     google.charts.load('upcoming', {'packages':['geochart']}); 
     google.charts.setOnLoadCallback(drawRegionsMap); 

     function drawRegionsMap() { 

      var data_table = new google.visualization.DataTable(); 

      //NEED TO UPDATE THIS TO CHECK DATA TYPE OF FIRST ROW AND AUTO OUTPUT COLUMN HEADERS 
      data_table.addColumn({"type": "string","label": "Country"}); 
      data_table.addColumn({"type": "number","label": "Volume"}); 

      var datas = $('#testArea').val(); 
      var rows = datas.split("\n"); 

      for (var r = 1; r < rows.length; r++) { 
       row = rows[r].split("\t"); 
       data_table.addRow([{v: row[0]}, {v: parseInt(row[1])}]); 
      } 

      var options = {colorAxis: {colors: ['#f5f5f5','#267114']}, legend: {textStyle: {color: 'blue', fontSize: 16}}}; 
      var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 


      chart.draw(data_table, options); 
     } 
    } 

Anstatt versuchen, ein Array in passieren, ich Schleife durch und mit dem addRow Befehl, wie ich gehe .