Question

您好我试图为我的网站制作一个折线图，显示我在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行管理员值：

Estado Hora

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的任何内容我首先要做的就是那个例子。如何将结果转换为折线图？

Answer 1

您的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);

结果如下：

The resulting pie chart

我希望有所帮助。

无效的JSON字符串

1 个答案: