我想在占位符的弹出框(谷歌地球桌面)中显示一个饼图(使用Highcharts库),该饼图来自驻留在实时服务器上的mysql数据库中的数据。
该图表旨在具有动态性和实时性。
从我的研究中,我发现我可以使用JSON格式的数据来完成这项工作,这些数据取自服务器中的php脚本,并发送到经过预处理的HTML文件中。
我把html代码(highcharts.html)放在占位符弹出窗口中,它指的是服务器中的retrieve_data.php文件。
php文件成功地获取了伪数据(如果您访问html代码中引用的php脚本的地址,您可以看到它们),因此JSON编码似乎已经完成。
现在的问题是如何最终将它们发送到谷歌地球标记(或获取它们的谷歌地球标记)。。。。
我是在与服务器的通信中遗漏了什么,还是做错了什么??
注意:这是我第一次接触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);
?>
问题是这个URL是正确的(至少对我来说):http://diss.web44.net/retrieve_data.php
您的JSON将所有数字都作为字符串,例如:["Direct Sales","20.00"]
->20.00是一个字符串,而应该是nuber。更改它以获取数字,效果会很好。