如何将 cURL 响应解析为 JSON 以供 Google 图表读取

Question

所以基本上我正在执行 cURL 请求以获取 JSON 对象。这是我的 getData.php 文件：

     <?php

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://mfdewfewffewfefef.com/api/dataout/IAfhAfTIUZrCje5q.json");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");


$headers = array();
$headers[] = "X-Apikey: xxxxxxxxxxxxxxxxxxxxx";
$headers[] = "X-Startdate: 2016-10-04 00:00:00";
$headers[] = "X-Enddate: 2016-10-08 15:00:00";
$headers[] = "X-Channelnum: 2";
$headers[] = "X-Reclimit: 50";
$headers[] = "User-Agent: cwfewfewf/1.0";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 


$result = curl_exec($ch);
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}

print_r($result);

?>

我收到回复：https://i.imgur.com/5FcH3j9.png

基本上这是用热传感器测得的值。 "ts"是测量时间，"value"是实际值。

现在我正尝试使用此信息绘制 Google 图表，但我做不到。这是我的 chart.html 页面：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType: "json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

我做错了什么？我只是得到一个空白页。在 Google 图表文档中，它说 getData.php 可以是任何格式，只要它是 json 格式，并且我在 getData.php 上输出的 curl 响应是 JSON格式。

或者我是否需要做一些改变让图表只读取"ts"和"value"信息并绘制图表？

Answer 1

根据 OP 的要求，我对 chart.html 进行了如下更改

<html>
    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript">

            // Load the Visualization API and the piechart package.
            google.charts.load('current', {'packages': ['corechart']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                var jsonData = $.ajax({
                    url: "getData.php",
                    dataType: "json",
                    async: false
                }).responseText;

                jsonData = JSON.parse(jsonData);

                jsonData = jsonData.channels[2].values;

                var dataArray = [['ts', 'values']];
                for (var i = 0; i < jsonData.length; i++)
                {
                    var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))];
                    dataArray.push(tempArray);
                }

                // Create our data table out of JSON data loaded from server.
                var data = google.visualization.arrayToDataTable(
                        dataArray
                        );                

                var options = {
                    hAxis: {title: 'TIME->  "TS" Variable', titleTextStyle: {color: '#333'}},
                    vAxis: {title: 'Values', titleTextStyle: {color: '#333'}}

                };

                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }

        </script>
    </head>

    <body>
        <!--Div that will hold the pie chart-->
        <div id="chart_div" style="width: 100%; height: 500px;"></div>
    </body>
</html>

我已经在我的系统中测试了代码，图表如下所示

如何将 cURL 响应解析为 JSON 以供 Google 图表读取

How to parse cURL response into JSON for Google charts to read

php

charts

json

curl

draw