2016-06-21 7 views
1

Google Chartsでマップをレンダリングするために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ファイルがうまく形成されているが、私は常に2つの答えを得ると私はマップが表示されないことを知っています。答えは、 "Bad formation"(jsonファイルを参照)、 "Error:配列ではない"です。 2番目の答えは、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); 

    }) 
}; 
関連する問題