无法从 JSON 数据显示 Google Gauge

Posted 2023-02-24

【中文标题】无法从 JSON 数据显示 Google Gauge

【英文标题】：Unable to display Google Gauge from JSON data

【发布时间】：2014-10-18 16:27:03

【问题描述】：

我正在尝试通过 JSON 编码从 mysql 数据库中的数据中获取我网站上的一些谷歌图表。检查了几个论坛后，我的 json 编码数据看起来格式正确，但 google.visualization.DataTable 部分似乎没有做任何事情。

我的主要代码如下：

<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">google.load('visualization', '1', 'packages':['corechart',   'table', 'gauge']);</script>
<script type="text/javascript">

function dataSelect(option1) 

var option2 = "";

// create graphs

switch (option1)

case "logged":

option2 = "logged";

// Get Logged Graph Data 

var jsonLoggedGauges = $.ajax(
url:        "getLoggedGaugeData.php", 
dataType:   "json",
async:      false
).responseText;

//document.write(jsonLoggedGauges);
var gaugeData = new google.visualization.DataTable(jsonLoggedGauges);


// Draw Gauges

var gaugeChart = new google.visualization.PieChart(document.getElementById('gauge_div'));
var gaugeOptions = width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5;
gaugeChart.draw(gaugeData, gaugeOptions);

break;

</script>

我的getLoggedGaugeData.php如下：

<?php include 'dbconnect.php';

$result = $dbhandle->query("SELECT currentTemp, feelsLike, windSpeed, humidity, pressure FROM `logged` ORDER BY dateTime DESC LIMIT 1");
$table = array();
$table['cols'][] = array('id' => "", 'label' => "Label", pattern => "", 'type' => 'string');
$table['cols'][] = array('id' => "", 'label' => "Value", pattern => "", 'type' => 'number');

while ($nt = $result->fetch_assoc())

$table['rows'][]['c'] = array( array('v' => 'Current Temp'), array('v' => $nt['currentTemp']));
$table['rows'][]['c'] = array( array('v' => 'Feels Like'), array('v' => $nt['feelsLike']));
$table['rows'][]['c'] = array( array('v' => 'Wind Speed'), array('v' => $nt['windSpeed']));
$table['rows'][]['c'] = array( array('v' => 'Humidity'), array('v' => $nt['humidity']));
$table['rows'][]['c'] = array( array('v' => 'Pressure'), array('v' => $nt['pressure']));


$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
echo $jsonTable;
?>

如果我从 document.write(jsonLoggedGauges); 中删除 //为了激活它，我得到如下数据，看起来是正确的：

"cols":["id":"","label":"Label","pattern":"","type":"string",  "id":"","label":"Value","pattern":"","type":"number"],"rows":["c":["v":"Current Temp","v":15.3],"c":["v":"Feels Like","v":13.5],"c":["v":"Wind Speed","v":5],"c":["v":"Humidity","v":68],"c":["v":"Pressure","v":1002.1]]

任何建议都将不胜感激，因为我完全不知道为什么它不起作用。

【参考方案1】：

希望它对你有用：

PHP MySQL Google Chart JSON - Complete Example

Google 一般会以 JSONP 格式返回数据

【讨论】：

链接效果很好，很有用。将内容放在这里以供将来参考。