如何在实时图表上修复“ Highcharts错误#13”?当我已经插入DOMContentLoaded时

时间:2019-05-09 03:48:31

标签: php ajax charts highcharts

我已经遵循了此[link]:How can I fix Highcharts error #13?,但在我的图表中仍然出现错误。我想制作实时海图,这是我第一次制作实时海图并使用海图,有人可以帮我解决这个问题吗?

这是我的dataPLLive.php

<?php

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

$servername = "....0";
$username = "...s";
$password = "....";
$dbname = "...n";

$conn = mysqli_connect($servername, $username, $password, $dbname);
$query = mysqli_query($conn,   ("SELECT a.`JAM`, AVG(a.PacketLoss) AVG
FROM (
SELECT `JAM`,`RNC`,`IPPATH_PM` AS PHB,`VS_IPPM_FORWORD_DROPMEANS` AS PacketLoss, `VSIPPMRttMeans` AS Latency, 'IPPM'
FROM `rnc_ippm_meas`
WHERE JAM=(SELECT MAX(JAM) FROM `rnc_ippm_meas`) AND `IPPATH_PM` LIKE '%AF31%'
UNION
SELECT `JAM`,`RNC`,`IPPOOL_PM`,`VSIPPOOLIPPMForwardDrop-Means`,`VSIPPOOLIPPMRttMeans`, 'IPPOOLPM'
FROM `rnc_ippool_ippm_meas` 
WHERE JAM=(SELECT MAX(JAM) FROM `rnc_ippool_ippm_meas`) AND `IPPOOL_PM` LIKE '%AF31%') a
GROUP BY a.`JAM`
LIMIT 10000 "));

if (!$query) {
    printf("Error: %s\n", mysqli_error($conn));
    exit();
}

while ($row = mysqli_fetch_assoc($query)) {            
    $value = $row['AVG'];

    $x = time() * 1000;
    $y = $value;

    $arr = array($x, $y);
    echo json_encode($arr);         
}

?>

这是json的样子

[1557373542000,"0.019680205406590504"]

然后这是我的html代码

<script>
        var chart;
        function requestData() {
            $.ajax({
                url: 'Controller/dataPLLive.php',
                success: function(point) {
                    var series = chart.series[0],
                        shift = series.data.length > 20; // shift if the series is 
                                                         // longer than 20

                    // add the point
                    chart.series[0].addPoint(point, true, shift);

                    // call it again after one second
                    setTimeout(requestData, 1000);    
                },
                cache: false
            });
        }
        document.addEventListener('DOMContentLoaded', function() {

            chart = Highcharts.chart('loss_live', {
                chart: {
                    type: 'spline',
                    events: {
                        load: requestData
                    }
                },
                title: {
                    text: 'Live random data'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'Random data',
                    data: []
                }]
            });        
        });
    </script>

然后我按照https://www.highcharts.com/docs/working-with-data/live-data制作实时图表。

我的代码有问题吗?希望有人帮助我,谢谢顺便说一句

1 个答案:

答案 0 :(得分:1)

代码未显示div loss_live在哪里,但我认为它确实在JS部分之前。

JSON应类似于[1557373542000,0.019680205406590504]。值上没有双引号。

从以下代码中更改此行

$y = $value;

$y = floatval($value);