请帮我解决这个问题。我得到相同大小的标记，而我希望标记大小应根据其值而变化。 我的代码
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 添加数据后，我得到了相同大小的标记。
任何帮助将不胜感激。
提前致谢。 :)
最佳答案
'Occurances' 列应为数字
data.addColumn('数字', '出现次数');
请参阅以下工作片段...
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']
});<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>关于javascript - Google Geocharts-在调用 json 数据时获取相同大小的标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40481439/