大家好我试图用googlechart api绘制google地图,并通过php从mysql db中获取数据。问题是它没有显示
<?php
include ("config.php");
header("Content-type: application/json");
$sql="SELECT Regioni, Giocatori FROM mappa";
$records = select($db, $sql);
foreach($records as &$record) {
$record['Giocatori']=floatval($record['Giocatori']);
}
echo(json_encode($records));
?>
导致:
[ { Regioni: "Piemonte", Giocatori: 4.233 },
{ Regioni: "Valle d'Aosta", Giocatori: 4.233 },
{ Regioni: "Liguria", Giocatori: 4.233 },
{ Regioni: "Lombardia", Giocatori: 3.247 },
{ Regioni: "Trentino Alto Adige", Giocatori: 3.247 },
{ Regioni: "Veneto", Giocatori: 3.247 },
{ Regioni: "Friuli Venezia Giulia", Giocatori: 3.247 },
{ Regioni: "Emilia Romagna", Giocatori: 3.774 },
{ Regioni: "Toscana", Giocatori: 3.774 },
{ Regioni: "Umbria", Giocatori: 3.774 },
{ Regioni: "Marche", Giocatori: 3.774 },
{ Regioni: "Lazio", Giocatori: 3.774 },
{ Regioni: "Abruzzo", Giocatori: 3.774 },
{ Regioni: "Molise", Giocatori: 3.774 },
{ Regioni: "Campania", Giocatori: 5.746 },
{ Regioni: "Puglia", Giocatori: 5.746 },
{ Regioni: "Basilicata", Giocatori: 5.746 },
{ Regioni: "Calabria", Giocatori: 5.746 },
{ Regioni: "Sicilia", Giocatori: 5.746 },
{ Regioni: "Sardegna", Giocatori: 5.746 } ]
在js中我把这个
function crea_mappa() {
$.getJSON('api/getdata10.php', function(data) {
var dataTable = google.visualization.arrayToDataTable(data);
var opzioni = {
region: 'IT',
displayMode: 'regions',
resolution: 'provinces',
colorAxis: { colors: ['#b3b3ff', '#3333ff', '#000080'] },
legend: { textStyle: { fontSize: 13, fontName: 'Arbutus Slab' } }
};
var chart = new google.visualization.GeoChart(document.getElementById('grafmappa'));
chart.draw(dataTable, opzioni);
});
}
那么我错过了什么?我做错事情了?我把这些librires包含在地图中:
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/regioncoder/0/geocodes/it.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_geochart_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_ui_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_default_module.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_format_module.js"></script>
<link id="load-css-1" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/util/util.css">
<link id="load-css-0" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/core/tooltip.css">
<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/loader.js"></script>