使用 Highcharts 和 MySQL 数据库数据的动态图表答案

【问题标题】：Dynamic chart using Highcharts with data from MySQL database使用 Highcharts 和 MySQL 数据库数据的动态图表
【发布时间】：2016-05-25 10:17:22
【问题描述】：

我尝试根据本教程https://www.youtube.com/watch?v=9zxfoamp-xc 使用来自 MySQL 数据库的更新数据制作动态图表，但屏幕上没有任何显示。没有图表正在生成。

datos.php

<?php
$pdo=new PDO("mysql:dbname=basededatoslocal;host=127.0.0.1","root","");

if(isset($_GET['Consultar']) && $_GET['Consultar']=='1'){
            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id DESC LIMIT 0,1");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
}
else
{
        // Buscar Todos los datos

            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id ASC");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);

            echo $json;
}


?>

json 输出

[{"x":"0","y":"2"},{"x":"5","y":"3"},{"x":"10"," y":"3"},{"x":"15","y":"3"},{"x":"20","y":"4"},{"x":" 30","y":"3"},{"x":"35","y":"5"},{"x":"40","y":"4"},{" x":"45","y":"3"}]

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
  <body>
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>   

      <script>
    $(function () {
    $(document).ready(function () {
        var ultimox;
        var ultimoy;

        $.ajax({
                url: "datos.php",
                type: 'get',
                success: function(DatosRecuperados) {
                $.each(DatosRecuperados, function(i,o){
                    if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
                    if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
                });

                setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
                sety(DatosRecuperados[(DatosRecuperados.length)-1].y);

                $('#container').highcharts({
                    chart:{
                            type: 'spline',
                            animation: Highcharts.svg,
                            marginRight: 10,
                            events: {load: function () {series = this.series[0];}}
                        },
                    title:{text: 'Live random data'},
                    xAxis:{tickPixelInterval: 150},
                    yAxis:{title: {text: 'Value'},
                        plotLines: [{value: 0,width: 1,color: '#808080'}]
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.numberFormat(this.x, 2) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                            }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{ name: 'Random data', data:DatosRecuperados}]
                });

        }});
    });
          setInterval(function () {
                $.get( "datos.php?Consultar=1", function( UltimosDatos ) {
                    var varlocalx=parseFloat(UltimosDatos[0].x);
                    var varlocaly=parseFloat(UltimosDatos[0].y);

                 if((getx()!=varlocalx)&&(gety()!=varlocaly)){

                    series.addPoint([varlocalx, varlocaly], true, true);
                    setx(varlocalx);
                    sety(varlocaly);
                }
           });}, 1000);

          function getx(){return ultimox;}
          function gety(){return ultimoy;}
          function setx(x){ultimox=x;}
          function sety(y){ultimoy=y;}

});    

      </script>
  </body>

我希望有人可以帮助我。

谢谢，保罗

【问题讨论】：

原因是值的类型。它应该是数字而不是你所拥有的字符串。在 json_encode() 函数中设置 json_numeric_check 标志。
感谢您的回答。我已经将 datos.php 中的行更改为“$json=json_encode($results, JSON_NUMERIC_CHECK);”，但没有任何改变。

标签： javascript php mysql highcharts

【解决方案1】：

本教程的作者帮助了我。我只发布了 datos.php 工作代码，因为上一篇文章中的 index.html 很好。也许它可以帮助某人:)

<?php
error_reporting(0);
header('Content-Type: application/json');
$pdo=new PDO("mysql:dbname=basededatoslocal;host=127.0.0.1","root","");
switch($_GET['Consultar']){
        // Buscar Último Dato
        case 1:
            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id DESC LIMIT 0,1");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
        break; 
        // Buscar Todos los datos
        default:

            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id ASC");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
        break;
}
?>

【讨论】：