Google-Diagramme, JSON schlecht gebildet und Fehler: kein Array

Question

Ich versuche, eine JSON-Datei übergeben, um eine Karte mit Google Charts zu rendern. Mein Script-Code ist:

google.charts.load('current', {'packages': ['geomap']}); 
google.charts.setOnLoadCallback(drawMap); 

function drawMap() { 
    var dimension = "Clientes"; 
    var datosMapa; 

    $.ajax({ 
     url:"datosCiudades.json", 
     dataType: "JSON" 
    }).done (function(data){ 
    datosMapa = [["City",dimension]]; 
    $.each(data.datosGeograficos,function(){ // 
     var datoCiudad = [this.City,this[dimension]]; 
     console.log(data.City); 
     datosMapa.push(datoCiudad); 
    }) 
    }) 

    console.log(JSON.stringify(datosMapa)); 

    var datas = google.visualization.arrayToDataTable(datosMapa); 

    var options = {}; 
    options['region'] = 'ES'; //US //154 
    options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors 
    options['dataMode'] = 'markers'; 

    var container = document.getElementById('map_canvas'); 
    var geomap = new google.visualization.GeoMap(container); 
    geomap.draw(datas, options); 
}; 

Und die JSON-Datei ist:

{ 
    "datosGeograficos": [ 
    { 
     "City": "Madrid", 
     "Clientes": 200 
    }, 
    { 
     "City": "Leon", 
     "Clientes": 300 
    }, 
    { 
     "City": "Valencia", 
     "Clientes": 400 
    }, 
    { 
     "City": "Toledo", 
     "Clientes": 500 
    }, 
    { 
     "City": "Cuenca", 
     "Clientes": 600 
    }, 
    { 
     "City": "Vigo", 
     "Clientes": 700 
    } 
    ] 
} 

Ich weiß, dass JSON-Datei gut ausgebildet ist, aber ich habe immer zwei Antworten erhalten, und ich sehe nicht die Karte. Die Antworten sind: "Schlecht gebildet", (bezieht sich auf JSON-Datei) und "Fehler: kein Array". Die zweite Antwort ist, weil die Daten in der JSON-Datei nicht gefunden werden. Vielen Dank.

Answer 1

Schließlich beantwortete ich meine eigene Frage; Ich lege die Lösung hier für andere Leute in der gleichen Situation. Das vollständige Skript ist:

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

function drawMap() { 
    var dimension = "Clientes"; 
    var datosMapa; 

    $.ajax({ 
     url:"datosCiudades.json", 
     dataType: "JSON" 
    }).done (function(data){ 

    datosMapa = [["City","Clientes"]]; 
    $.each(data.datosGeograficos,function(){ 
     var datoCiudad = [this.City,this.Clientes]; 
     console.log("datoCiudad: " + datoCiudad); 
     datosMapa.push(datoCiudad); 
    }) 

    var datas = google.visualization.arrayToDataTable(datosMapa); 

    var options = { 
     region: 'ES', resolution: 'provinces', 
     displayMode: 'markers', 
     backgroundColor: '#F0F8FF', //color de lo que no son los países 
     datalessRegionColor: '#FFEBCD', //color de los países 
     defaultColor: '#f5f5f5', 
     //displayMode: 'text' , Muestra el texto en vez del círculo. 
     colorAxis: {colors: ['#7FFFD4', 'blue']} 
    }; 


    var container = document.getElementById('map_canvas'); 
    var geomap = new google.visualization.GeoChart(container); 
    geomap.draw(datas, options); 

    }) 
};