个人中心
gpt4 book ai didi

php - 折线图上的 Google Chart API 无效 JSON 字符串

转载 作者：行者123 更新时间：2023-11-30 22:20:51 29 4
gpt4 key购买 nike

我正在尝试使用 Google Charts API 创建基于 MySQL 数据库的折线图。该数据库包含温度和时间戳。

我有 getData.php 来获取数据并将其转换为 JSON。 

<?php
$servername = "xxx";
$username = "xxx";
$password = "xxx";
$dbname = "xxx";


$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$qry = "SELECT * FROM temp";

$result = mysqli_query($conn,$qry);

$table = array();
$table['cols'] = array(

    array('label' => 'Time', 'type' => 'datetime'),
    array('label' => 'Temperature', 'type' => 'number')
);

$rows = array();
foreach($result as $row){

    $temp = array();

    //$temp[] = array('v' => 'Date(' . $row['time'] . ')'); OLD

    //turn timestamps into correct datetime form Date(Y,n,d,H,i,s) 
    $temp[] = array('v' => 'Date('.date('Y',strtotime($row['time'])).',' . 
                                 (date('n',strtotime($row['time'])) - 1).','.
                                 date('d',strtotime($row['time'])).','.
                                 date('H',strtotime($row['time'])).','.
                                 date('i',strtotime($row['time'])).','.
                                 date('s',strtotime($row['time'])).')'); 


    $temp[] = array('v' => (float) $row['temperature']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

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

时间戳按照 Google 的说明转换为“日期(年、月、日、小时、分钟、秒、毫秒)”格式:https://developers.google.com/chart/interactive/docs/datesandtimes#dates-times-and-timezones

这是我的 main.html。它基于 Google 的示例 ( https://developers.google.com/chart/interactive/docs/php_example#exampleusingphphtml-file )

<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 corechart package.
        google.charts.load('current', {'packages':['line']});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

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

        var data = new google.visualization.DataTable(jsonData); //Line 27


        var options = {'title':'Temperature',
                       'width':720,
                       'height':480};

        var chart = new google.charts.Line(document.getElementById('chart_div'));


        //chart.draw(data, options);
        //chart.draw(data, {width: 400, height: 240});
        chart.draw(data, google.charts.Line.convertOptions(options));



      }
    </script>

</head>

<body>
   <div id="chart_div"><p id="test"></p></div>
</body>
<html>

网站是空白的，Chrome 调试器显示此错误:

Uncaught Error :无效的 JSON 字符串:

<body>
{"cols":[{"label":"Time","type":"datetime"},{"label":"Temperature","type":"number"}],"rows":[{"c":[{"v":"Date(2016,3,14,10,36,30)"},{"v":22}]},{"c":[{"v":"Date(2016,3,14,10,37,31)"},{"v":25}]},{"c":[{"v":"Date(2016,3,14,10,37,53)"},{"v":21}]},{"c":[{"v":"Date(2016,3,15,01,23,37)"},{"v":21}]}]}
</body>

yl @ VM1981:170
Ol @ VM1981:174
Sp @ VM1981:234
drawChart @ main.html:27
google.a.b.Na @ loader.js:147
g @ loader.js:145

main.html:27 是 var data = new google.visualization.DataTable(jsonData);行。

这里是用jsonlint格式化的JSON

{
"cols": [{
    "label": "Time",
    "type": "datetime"
}, {
    "label": "Temperature",
    "type": "number"
}],
"rows": [{
    "c": [{
        "v": "Date(2016,3,14,10,36,30)"
    }, {
        "v": 22
    }]
}, {
    "c": [{
        "v": "Date(2016,3,14,10,37,31)"
    }, {
        "v": 25
    }]
}, {
    "c": [{
        "v": "Date(2016,3,14,10,37,53)"
    }, {
        "v": 21
    }]
}, {
    "c": [{
        "v": "Date(2016,3,15,01,23,37)"
    }, {
        "v": 21
    }]
}]
}

我在这里完全不知所措。 JSON 字符串应该没问题，它也由 jsonlint.com 验证。任何帮助将不胜感激。

最佳答案

复制您的代码并在 getData.php 中返回粘贴的 json 字符串我无法重现您的错误。

请检查 main.html 中的 ajax 响应:

console.log(jsonData);

如果我在 getData.php 中添加额外的输出(例如 var_dump 之类的东西)，我可能会创建无效的 JSON 字符串错误。 

<body>

围绕您的 JSON 字符串的标记是可疑的，因为在错误消息中打印了格式错误的 JSON 字符串，因此该标记似乎是您的 JSON 字符串的一部分。您在 getData.php 中的 php 代码是否嵌入到 body-tags 中？

在 main.html 中你可以尝试:

jsonData=jsonData.replace("<body>", "").replace("</body>", "");

检查一下，这是否可能是问题所在。

关于php - 折线图上的 Google Chart API 无效 JSON 字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36675179/

29 4 0
文章推荐： python - 使用 SQLAlchemy 获取页面的特定数量的结果
文章推荐： c# - Datetime.ParseExact() 不工作
文章推荐： python - 查找Tensorflow中的所有检查点路径
文章推荐： c# - 从 where 子句或第一个元素返回一个元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com