Google Geocharts- jsonデータの呼び出しで同じサイズのマーカーを取得する

この問題を解決するのを手伝ってください。同じサイズのマーカーを取得していますが、マーカーのサイズはその値によって異なるはずです。私のコードGoogle Geocharts- jsonデータの呼び出しで同じサイズのマーカーを取得する

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からデータを追加した後、私は同じサイズのマーカーを取得しています。

ご協力いただければ幸いです。

ありがとうございます。 :)

出典

2016-11-08 priya_singh

'Occurances'列は

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

数値でなければなりません...作業スニペット以下

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>

出典

2016-11-08 13:45:19 WhiteHat

感謝を参照してください。そのうまく動作します。私はJsonの形でたくさんのデータを持っています。データの読み込み速度を上げる方法はありますか？ –

まだ遅すぎます。 –

はい。私はgoogle.visualization.DataTable（要素）を使用しました。 –

Google Geocharts- jsonデータの呼び出しで同じサイズのマーカーを取得する

答えて

関連する問題