【发布时间】：2013-08-09 07:50:24
【问题描述】：
我想在地标的弹出框（谷歌地球桌面）内显示一个饼图（使用 Highcharts 库），该饼图取自实时服务器上的 mysql 数据库中的数据。
图表旨在动态和实时。
根据我的研究，我发现我可以使用从服务器中的 php 脚本获取的 JSON 格式数据并发送到预处理的 HTML 文件。
我将 html 代码 (highcharts.html) 放在地标弹出窗口中，它引用驻留在服务器中的 retrieve_data.php 文件。
php 文件正在成功获取虚拟数据（如果您访问 html 代码中引用的 php 脚本的地址，则可以看到它们），因此似乎 JSON 编码已完成。
现在的问题是如何最终将它们发送到 Google 地球地标（或 Google 地球地标以获取它们）......
我是否在与服务器的通信中遗漏了什么或者我做错了什么？？
注意：这是我第一次接触 JSON 数据传输！
以下是我使用的文件。
提前感谢大家的帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'gjcgjcgjcgjj'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
}
<!-- maybe the correct file address is http://diss.web44.net/retrieve_data.php -->
$.getJSON("http://diss.web44.net/home/a1964573/public_html/retrieve_data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
------------和php文件---------
<?php
$hostname = "host";
$username = "user";
$pass = "pass";
$db = "awesomedb";
$connection = mysql_connect($hostname,$username,$pass);
if (!$connection)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db, $connection);
$result = mysql_query("SELECT sensorID,temp FROM ccdata");
$rows = array();
while($r = mysql_fetch_array($result)) {
$row[0] = $r[0];
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysql_close($connection);
?>
【问题讨论】：
标签： php mysql json highcharts google-earth