Question

请帮我解决这个问题。我得到相同大小的标记，而我想标记大小应根据其值而变化。我的代码

的index.html

<!DOCTYPE html>
<html>
<head>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXy0BKw58SlhIj-KHgtu3IGSk8JV8X2JI" type="text/javascript"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 $.getJSON("jsonp.json", function foo(result) {
  google.charts.load('upcoming', {'packages': ['geochart']});
  google.charts.setOnLoadCallback(drawMarkersMap);
  var jsonRequestUrl = 'jsonp.json';
  var elements = result["Jobs Data - City Occurances"];
  elements = JSON.stringify(elements);                       // <====
  elements = JSON.parse(elements);

  function drawMarkersMap() {
    var data = new google.visualization.DataTable();
     data.addColumn('string', 'City');
     data.addColumn('string', 'Occurances');
     data.addColumn({type: 'string', role: 'tooltip'});
     data.addRows(elements.length);
     $.each(elements, function (index, value) {
      data.setCell(index,0,elements[index].City);
      data.setCell(index,1,elements[index].Occurances);
      data.setCell(index,2,elements[index].City);
     });

   var options = {
     region: 'US',
     displayMode: 'markers',
     colorAxis:{
       minValue: 0,
       maxValue:600,
      colors:['blue','green','red']
      },
     resolution: 'provinces'
   };

   var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
   chart.draw(data, options);
 };

 });
</script>

</head>
<body>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

jsonp.json文件

{
 "Jobs Data - City Occurances": [
  {
    "City": "new york",
    "Occurances": "555"
  },
  {
    "City": "inglewood",
    "Occurances": "1"
  },
  {
    "City": "houston",
    "Occurances": "296"
  },
  {
    "City": "montgomery center",
    "Occurances": "275"
  },
  {
    "City": "dallas",
    "Occurances": "259"
  },
  {
    "City": "san diego",
    "Occurances": "197"
  },
  {
    "City": "detroit",
    "Occurances": "187"
  },

  {
    "City": "philadelphia",
    "Occurances": "118"
  },
  {
    "City": "richfield",
    "Occurances": "115"
  }

]
}

我希望结果像geocharts一样。但是在从json添加数据后，我得到了相同大小的标记。

任何帮助将不胜感激。

提前致谢。：）

Answer 1

'Occurances'列应为数字

data.addColumn('number', 'Occurances');

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var result = {"Jobs Data - City Occurances": [
      {
        "City": "new york",
        "Occurances": "555"
      },
      {
        "City": "inglewood",
        "Occurances": "1"
      },
      {
        "City": "houston",
        "Occurances": "296"
      },
      {
        "City": "montgomery center",
        "Occurances": "275"
      },
      {
        "City": "dallas",
        "Occurances": "259"
      },
      {
        "City": "san diego",
        "Occurances": "197"
      },
      {
        "City": "detroit",
        "Occurances": "187"
      },
      {
        "City": "philadelphia",
        "Occurances": "118"
      },
      {
        "City": "richfield",
        "Occurances": "115"
      }
    ]};

    var elements = result["Jobs Data - City Occurances"];
    elements = JSON.stringify(elements);
    elements = JSON.parse(elements);

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'City');
    data.addColumn('number', 'Occurances');
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addRows(elements.length);
    $.each(elements, function (index, value) {
      data.setCell(index,0,elements[index].City);
      data.setCell(index,1,parseFloat(elements[index].Occurances));
      data.setCell(index,2,elements[index].City);
    });

    var options = {
      region: 'US',
      displayMode: 'markers',
      colorAxis:{
        minValue: 0,
        maxValue:600,
        colors:['blue','green','red']
      },
      resolution: 'provinces'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    chart.draw(data, options);
  },
  packages:['geochart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="regions_div"></div>

＆＃13;

Google Geocharts-在调用json数据时获得相同大小的Marker

1 个答案: