Question

我正在尝试传递json文件以使用Google Charts渲染地图。我的脚本代码是：

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文件格式正确，但我总是得到两个答案而且我没有看到地图。答案是：＆＃34;坏形成＆＃34;，（它指的是json文件），＆＃34;错误：不是数组＆＃34;。第二个答案是因为找不到json文件中的数据。非常感谢你。

Answer 1

最后，我回答了自己的问题;我把这个解决方案放在同样的情况下给其他人。完整的脚本是：

google.charts.load（＆＃39; current＆＃39;，{＆＃39; packages＆＃39;：[＆＃39; geochart＆＃39;]}）; 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);

  })
};

谷歌图表，json形成错误和错误：不是数组

1 个答案: