嗨，我试图为我的网站制作一个折线图，显示来自 MySQL 数据库的数据，但我收到 inavlidd JSON 字符串错误，并且没有任何显示，这是我的代码。 我使用 https://developers.google.com/chart/interactive/docs/php_example 中的服务器端代码作为示例。
HTML
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(); //DEFINE DATATABLE
data.addColumn('string', 'Label'); //ADD COLUMN 1
data.addColumn('number', 'Value'); //ADD COLUMN 2
console.log(jsonData);
data.addRows(jsonData); //ADD THE RECEIVED jsonData
// SET OPTIONS
var options = {'title':'REALLY PRETTY PIE CHART',
'width':400,
'height':300};
// Instantiate and draw THE chart
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
PHP
<?php
include_once 'Config.php'; //configuration of my Mysql Database
$public = 'admin'; //This variable is to select the user i want
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$gsent = $conn->prepare("SELECT estado,Hora FROM Datos Where Usuario LIKE '$public'");
$gsent->execute();
$resultado = $gsent->fetchAll();
$resultAdoJson = json_encode($resultado);
$resulset = json_decode($resultAdoJson);
$result = array();
$i = 65;
foreach($resulset as $res) {
$result[] = array(chr($i++), intval($res->estado));
}
print json_encode($result);
}
catch (PDOException $pe) {
die("Could not connect to the database $dbname :" . $pe->getMessage());
}
?>
Mysql 表只有 3 行用于管理，其值:
霍拉州
- 50 2015-02-16
- 53 2015-02-16
- 10 2015-02-16
这是我从 php 中打印得到的 JSON
[{"estado":"50","0":"50","Hora":"2015-02-16","1":"2015-02-16"}, {"estado":"53","0":"53","Hora":"2015-02-16","1":"2015-02-16"},{"estado":"10","0":"10","Hora":"2015-02-16","1":"2015-02-16"}]Array
var_dump($resultado)
array(3) { [0]=> array(4) { ["estado"]=> string(2) "50" [0]=> string(2) "50" ["Hora"]=> string(10) "2015-02-16" [1]=> string(10) "2015-02-16" } [1]=> array(4) { ["estado"]=> string(2) "53" [0]=> string(2) "53" ["Hora"]=> string(10) "2015-02-16" [1]=> string(10) "2015-02-16" } [2]=> array(4) { ["estado"]=> string(2) "10" [0]=> string(2) "10" ["Hora"]=> string(10) "2015-02-16" [1]=> string(10) "2015-02-16" } }
我知道代码显示了一个饼图，但是因为我是 php 的新手，而且我首先对 json 或 javascript 一无所知，所以我想让这个例子像这样。当结果转换为折线图时，如何将其转换？
最佳答案
您的 PHP 脚本在 JSON 字符串旁边输出单词“Array”。从 PHP 脚本中删除行 echo $resultado;。
编辑: 此外，您必须将结果集格式化为具有 ['key', 'value'] 结构的数组数组...例如:
[
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]
根据您的情况，更改 PHP 脚本(例如)如下:
$resultado = $gsent->fetchAll();
$result = array();
$i = 65;
foreach($resultado as $res) {
$result[] = array(chr($i++), intval($res->estado));
}
print json_encode($result);
如您所见，我选择了“estado”作为值，选择 A、B、C 作为标签(使用 chr($i++) 实现)。
调整您的 JavaScript:
// STORE RESPONSE OF THE AJAX REQUEST IN jsonData
var jsonString = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
var jsonData = eval(jsonString); //create an javascript array
var data = new google.visualization.DataTable(); //DEFINE DATATABLE
data.addColumn('string', 'Label'); //ADD COLUMN 1
data.addColumn('number', 'Value'); //ADD COLUMN 2
data.addRows(jsonData); //ADD THE RECEIVED jsonData
// SET OPTIONS
var options = {'title':'REALLY PRETTY PIE CHART',
'width':400,
'height':300};
// Instantiate and draw THE chart
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
结果如下所示:
希望对您有所帮助。
关于php - JSON 字符串无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28645711/