2016-06-21 35 views
1

我想通過一個json文件來呈現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文件很好地形成的,但我總是得到兩個答案,我不看地圖。答案是:「Bad form」(它指的是json文件)和「Error:not an array」。第二個答案是因爲在json文件中找不到數據。 非常感謝。

回答

0

最後,我回答了我自己的問題;我把這個解決方案放在了同樣情況下的其他人身上。 完整的腳本是:

google.charts.load('current',{'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); 

    }) 
};