Google 차트, json이 형편 없음, 오류 : 배열이 아닙니다.

Question

Google 차트로지도를 렌더링하기 위해 json 파일을 전달하려고합니다. 내 스크립트 코드는 다음과 같습니다

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); 
}; 

그리고 JSON 파일은 다음과 같습니다

{ 
    "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 
    } 
    ] 
} 

는 그 JSON 파일이 잘 형성 알고,하지만 난 항상 두 개의 답을 얻고 나는지도를 볼 수 없습니다. 대답은 "잘못된 형식"(json 파일 참조)과 "오류 : 배열이 아닙니다"입니다. 두 번째 대답은 json 파일에서 데이터를 찾지 못하기 때문입니다. 대단히 감사합니다.

Answer 1

마지막으로 나는 내 자신의 질문에 대답했다. 저는 같은 상황에서 다른 사람들을 위해 해결책을 제시했습니다. 전체 스크립트는 다음과 같습니다.

google.charts.load ('현재', { '패키지': [ '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); 

    }) 
};