Question

我正在尝试从mysql数据库中检索实时数据并使用highcharts显示它，但似乎有些错误，因为我得到的只是一个空图表

这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Live Messages</title>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.highcharts.com/highcharts.js"></script>
        
        <script>
            var chart;
            var dataSource = 'http://localhost/live/data.php?format=json';
            
            function requestData() {
                $.ajax({
                    url: dataSource,
                    success: function(points) {
                
                        chart.series[0].setData(
                            points, 
                            true
                        );
            
                        // refresh after X miliseconds
                        setTimeout(requestData, 1000);    
                    },
                    cache: false
                });
            }
            

        
            $(document).ready(function() {
            
                    //add our div for the chart
                    $("#container").append("<div id=chart-trend></div>");
                    
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'chart-trend',
                            defaultSeriesType: 'spline',
                            events: {
                                load: requestData()
                            },
                            animation: {
                                duration:1000
                            }
                        },
                        title: {
                            text: 'temperateur'
                        },
                        subtitle: {
                            text: 'past 24 hours'
                        },
                        xAxis: {
                            type: 'datetime',
                            title: {
                                text: 'date'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'temp',
                                margin: 10
                            }
                        },
                        series: [{
                            showInLegend: false,
                            data: [],
                           // pointInterval: 3600*1000 / minute
                        }]
                    }); //end chart               
                
            }); //end document.ready
            
            
            
        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

这是数据库连接

<?php


/*
    Get data from the mysql database and return it in json format
*/
    
  
//setup global vars

$format = $_GET['format'];

if($format=='json'){ 
    header("Content-type: text/json"); 
}

$db = new mysqli('localhost', 'root', '', 'hicharts', 3306);

if (mysqli_connect_error()) {
    die('Connect Error (' . mysqli_connect_errno() . ') '
            . mysqli_connect_error());
}


// get data
$sql = "select dat,temp from temperateur";
    

if ($result = $db->query($sql)) {


    // $row = mysqli_fetch_array($result, MYSQLI_NUM);
    
    while($row = $result->fetch_array()){
        $rows[] = $row;
    }
    
    foreach($rows as $row){
        
        $datetime = strtotime($row['dat'])*1000;
    
        $temp = (int)$row['temp'];
        
        $data[] = array($datetime, $temp);
    }
    
    echo(json_encode($data));
    
    $result->close();

} else {
    echo "Error: " . $sql . "<br>" . $db->error;
}

$db->close();
?>

任何帮助

Answer 1

我假设你的PHP函数工作并从前端获取你想要的数据。

首先，移除()处的events: {load: requestData()}。它应该是events: {load: requestData}。

其次，在实例化Highcharts时调用requestData()。同时您在chart.series[0].setData(points, true);函数中设置requestData()，但如果不首先创建chart对象，则无法执行此操作。

试试这个：

if (typeof chart !== 'undefined') {
  chart.series[0].setData(points,true);
}

您可以查看https://jsfiddle.net/kwqjv5b6/

带有highcharts的实时数据

1 个答案: