Question

我很难弄清楚如何使用Highcharts从数据库中获取新的（实时）数据。

我测试了示例here，效果很好。

我每隔1分钟就会将新数据写入数据库。问题是我只能使用新插入的数据作为新数据点，从数据库中获取新插入的数据并每1分钟更新一次图表。我无法从数据库中显示历史数据。

Here is an example of what I'm trying to do.

这是我目前正在使用的代码。

[guitool "file Edit"]
    cmd = \"C:\\Program Files (x86)\\Notepad++\\notepad++.exe\" \"$FILENAME\"
    noconsole = yes
    needsfile = yes

这是data.php的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  var chart;
 $(document).ready(function() {
     var options = {
        chart: {
          renderTo: 'container',
          type: 'area',
          zoomType: 'x'
        },
        title: {
        },
        xAxis: {
           type: 'datetime'
        },
        yAxis: {
        },
        series: [{
           name: 'Download',
           data: []
       }, {
           name: 'Upload',
           data: []
        }]
     }; 
     $.getJSON('data.php', function(json) {
        data1 = [];
        data2 = [];
        $.each(json, function(key,value) {
        data1.push([value[0], value[1]]);
        data2.push([value[0], value[2]]);
        });

        options.series[0].data = data1;
        options.series[1].data = data2;
        chart = new Highcharts.stockChart(options);
     });
  });
</script>

<body>
 <div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>

</body>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

这是我从data.php得到的输出。

<?php

    $dbhost = 'localhost';
    $dbname = 'highchart';  
    $dbuser = '*******';                  
    $dbpass = '*******'; 

    try{

        $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
        $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $ex){

        die($ex->getMessage());
    }

    $stmt=$dbcon->prepare("SELECT * FROM trafico");
    $stmt->execute();
    $json = [];
    while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);
        $json[]= [strtotime($time_1m)*1000, (int)$Tx, (int)$Rx];
    }
    echo json_encode($json);
?>

这是我得到的图

基本上我不知道如何使上面的代码（此图表）每1分钟用新数据点动态更新。

Answer 1

问题解决了。

这是我添加的代码：

  events: {
    load: function requestData() {

        $.ajax({
            url: 'live.php',
            success: function(points) {
                var series = chart.series,
                shift;

                $.each(series, function(i, s) {
                    shift = s.data.length > 1;
                    s.addPoint(points[i], true, true);
                });
                setTimeout(requestData, 1000);   
                chart.redraw(); 
            },
            cache: false
        });

    }
    }

现在我有来自我的数据库的历史数据，并且每次在de DB中有新条目时都会添加新数据点而无需刷新页面。

这是我的live.php代码：

<?Php
header("Content-type: text/json");

    $dbhost = 'localhost';
    $dbname = 'highchart';  
    $dbuser = '*******';                  
    $dbpass = '*******'; 


    try{

        $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
        $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $ex){

        die($ex->getMessage());
    }

    $stmt=$dbcon->prepare("SELECT * FROM trafico");
    $stmt->execute();
    $json = [];
    while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row);
            }
        $json[]= [strtotime($time_1m)*1000, (int)$Tx];
        $json[]= [strtotime($time_1m)*1000, (int)$Rx];

    echo json_encode($json);
?>

这是live.php的输出：

[[1522869181000,872],[1522869181000,54]]

这就是代码现在的样子

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

  var chart;
 $(document).ready(function() {

        Highcharts.setOptions({
            time: {
                timezoneOffset: 3 * 60
            }
        });

     var options = {
        chart: {
          renderTo: 'container',
          type: 'area',
          zoomType: 'x',
          events: {
            load: function requestData() {

                $.ajax({
                    url: 'live.php',
                    success: function(points) {
                        var series = chart.series,
                            shift;

                        $.each(series, function(i, s) {
                            shift = s.data.length > 1;
                            s.addPoint(points[i], true, true);
                        });
                        setTimeout(requestData, 1000);   
                        chart.redraw(); 
                    },
                    cache: false
                });

            }
            }
        },
        title: {
        },
        xAxis: {
           type: 'datetime'
        },
        yAxis: {
        },
        series: [{
           name: 'Download',
           data: []
       }, {
           name: 'Upload',
           data: []
        }]
     }; 
     $.getJSON('data.php', function(json) {
        data1 = [];
        data2 = [];
        $.each(json, function(key,value) {
        data1.push([value[0], value[1]]);
        data2.push([value[0], value[2]]);
        });

        options.series[0].data = data1;
        options.series[1].data = data2;
        chart = new Highcharts.stockChart(options);
     });
  });
</script>

<body>
 <div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>

</body>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

如何使用Highcharts显示数据库中的历史数据和实时数据

1 个答案: