當我包含 PHP 代碼時，Geochart 不工作。下面是添加 PHP 之前的代碼，它工作正常： google.load('visualization','1', { 'packages':['geochart'], }); google.setOnLoadCallback(drawVisualization); function drawVisualization() {var data = new google.visualization.DataTable(); data.addColumn('number', 'LATITUDE'); data.addColumn('number', 'LONGITUDE'); data.addColumn('string', 'DESCRIPTION'); data.addColumn('number', 'A:', 'value'); data.addColumn({type:'string', role:'tooltip'}); data.addRows([[3.9374,102.3620, 'Jerantut', 0,'tooltip']]); //jerantut,phgdata.addRows([[ 4.7549,103.4156, 'Kuala Dungun', 1,'tooltip']]); //terengganu var options = { region: 'MY', // Africa displayMode: 'markers', resolution: 'provinces', colorAxis: {minValue: 0, maxValue: 0, colors: ['#6699CC']}, sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 25}, legend: 'none', enableRegionInteractivity: 'true', backgroundColor: '#ffffff', datalessRegionColor: '#D2F5F4', defaultColor: '#f5f5f5', }; var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 下面是添加PHP代碼后的代碼：function drawVisualization() {var data = new google.visualization.DataTable( data.addColumn('number', 'LATITUDE'); data.addColumn('number', 'LONGITUDE'); data.addColumn('string', 'DESCRIPTION'); data.addColumn('number', 'A:', 'value'); $exec = mysqli_query($con,$query); while(echo json_encode( $row );){data.addRows([['city_lat', 'city_long', 'student_city', 'count']]);};數據庫結構：請讓我知道添加 PHP 代碼后出現了什么問題以及如何解決這個問題。數據庫詳細：更新 $sql='select count(`student_city`) as count, `city_lat`, `city_long`, concat(`student_city`, ", ",`student_state`) as `description` from marketing_data GROUP BY student_city asc LIMIT 3';
1 回答
米琪卡哇伊
TA貢獻1998條經驗 獲得超6個贊
猜測我會說你可以這樣做，但我應該強調我無法測試這個。
function drawVisualization() {
var data = new google.visualization.DataTable(
data.addColumn('number', 'LATITUDE');
data.addColumn('number', 'LONGITUDE');
data.addColumn('string', 'DESCRIPTION');
data.addColumn('number', 'A:', 'value');
<?php
/*
Iterate through the recordset
and add a new row to the datatable
for each result.
*/
$res = mysqli_query($con,$query);
while( $rs=$res->fetch_object() ){
printf(
'data.addRow[ %s, %s, %s, %d ]',
floatval( $rs->city_lat ),
floatval( $rs->city_long ),
$rs->student_city,
intval( $rs->count )
);
}
?>
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
var options = {
region: 'MY', // Africa
displayMode: 'markers',
resolution: 'provinces',
colorAxis: {minValue: 0, maxValue: 0, colors: ['#6699CC']},
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 25},
legend: 'none',
enableRegionInteractivity: 'true',
backgroundColor: '#ffffff',
datalessRegionColor: '#D2F5F4',
defaultColor: '#f5f5f5',
};
chart.draw( data, options );
}
更新 現在看上面的事實，上面有一個明顯的錯誤。printf在被調用的循環中'data.addRow[ %s, %s, %s, %d ]',省略了大括號，所以它應該是'data.addRow( [ %s, %s, %s, %d ] )',。
基于您的代碼但結構略有不同的工作版本：
<?php
$dbhost = 'localhost';
$dbuser = 'dbo-user';
$dbpwd = 'xxx';
$dbname = 'xxx';
mysqli_report( MYSQLI_REPORT_STRICT );
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
/*
A slightly modified version of original schema
----------------------------------------------
mysql> describe gm_asia_students;
+---------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+---------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| matriculation | int(10) unsigned | YES | | NULL | |
| prg | varchar(255) | YES | | NULL | |
| semester | varchar(10) | YES | | NULL | |
| intake | year(4) | YES | | NULL | |
| city | varchar(50) | YES | | NULL | |
| lat | double | YES | | NULL | |
| lng | double | YES | | NULL | |
| state | varchar(128) | YES | | NULL | |
| code | varchar(6) | YES | | NULL | |
+---------------+------------------+------+-----+---------+----------------+
mysql> select * from gm_asia_students;
+----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+
| id | matriculation | prg | semester | intake | city | lat | lng | state | code |
+----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+
| 1 | 894635 | 404 | 1 | 2020 | Kuala Dungan | 4.7549 | 103.4156 | Terengganu | MY-11 |
| 2 | 845615 | 303 | 1 | 2020 | Kuala Dungan | 4.7956 | 103.3231 | Terengganu | MY-06 |
| 3 | 956325 | 808 | 1 | 2020 | Jerentut | 3.9374 | 102.362 | Pahang | MY-11 |
+----+---------------+------+----------+--------+--------------+--------+----------+------------+-------+
*/
$sql='select
`lat`,
`lng`,
concat(`city`, ", ",`state`) as `description`
from gm_asia_students';
$res=$db->query( $sql );
$tmp=[];
while( $rs=$res->fetch_object() )$tmp[]=$rs;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Google Visualisations:: GeoChart</title>
<style>
#chart{
width:100%;
height:100vh;
float:none;
margin:auto;
}
</style>
<script src='//www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load( 'current', {
'packages':['geochart'],
'mapsApiKey':'LEGITIMATE-MAPS-APIKEY'
});
<?php
# create json variable to be consumed by the dataTable
printf('
var data=%s;',json_encode( $tmp ) );
?>
function renderchart(){
var container=document.getElementById( 'chart' );
var datatbl=new google.visualization.DataTable();
datatbl.addColumn('number','lat');
datatbl.addColumn('number','lng');
datatbl.addColumn('string','description');
data.forEach( obj=>{
let row=[ parseFloat( obj.lat ), parseFloat( obj.lng ), obj.description ];
datatbl.addRow( row );
});
var options={
region:'MY', // NOT Africa, but South-Eastern Asia!
displayMode:'markers',
resolution:'provinces',
colorAxis:{ minValue:0, maxValue:0, colors:['#6699CC'] },
sizeAxis:{ minValue:1, maxValue:1, minSize:10, maxSize:25 },
magnifyingGlass:{ enable: true, zoomFactor: 7.5 },
markerOpacity:0.75,
legend:'none',
enableRegionInteractivity:true,
keepAspectRatio:true,
backgroundColor:'#ffffff',
datalessRegionColor:'#D2F5F4',
defaultColor:'#f5f5f5'
};
var chart=new google.visualization.GeoChart( container );
chart.draw( datatbl, options );
container.addEventListener( 'click', (e)=>{ console.info( getSelection() ) } );
};
google.charts.setOnLoadCallback( renderchart );
</script>
</head>
<body>
<div id='chart'></div>
</body>
</html>
- 1 回答
- 0 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消