谷歌折线图仅显示一个值，没有任何线条

问题描述 投票：0回答：1

所以我是 PHP 新手，我已将 MySQL 查询放入 PHP 命令中，但随后我尝试使用 JavaScript 使用不同的文件（用于 JavaScript 的 index.php 和用于 PHP 的 test.php）从数据中制作折线图，但每当我尝试运行它显示 null 的代码，它只出现 TTIME 中的一个值

这是我在index.php文件中的代码

``<?php

ini_set('memory_limit','512M');
ini_set('display_errors', 1);
error_reporting(E_ALL);

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'DEMO';

$dblink = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

// Check connection
if (!$dblink) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully<br /`>`";
`
// Perform your database query
$sql = ("Select P.ID, P.NAME, P.OID, MP.POLLID, MP.TTIME, MP.VAL, M.MOID, M.NAME, G.MOID, G.DEVICEID, G.COMMUNICATION FROM PolledData P LEFT join MULTI_POINT_SENSOR_DATA7_9_2023 MP on P.ID=MP.POLLID LEFT join ManagedObject M on P.ID=M.MOID LEFT join GatewayDevice G on M.MOID=G.MOID where MP.VAL IS NOT NULL
  LIMIT 350"); 



$results = mysqli_query($dblink, $sql); 
if (!$results) { 
  exit("Database query failed.");
}
echo 'DB in<br />';

$ndata = [];
$count = 0;
while ($data = mysqli_fetch_array($results)){
         $ndata[$count]['TTIME'] = $TTIME = $data['TTIME'];
         $ndata[$count]['VAL'] = $VAL = $data['VAL'];
          $count++;
          }

print_r($ndata);


?>

这是我在 test.php 文件中的代码

`<?php include "test.php"; ?>
<html>
  <head>
  <title>index</title>
    <link rel="shortcut icon" href="#">
    
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    
      google.charts.load('current', {'packages':['Line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['TTIME', 'VAL'],
     
          ['<?php echo $TTIME;?>', '<?php echo $VAL;?>']
        
        ]);

        var options = {
        chart: {
        title: 'TTIME and VAL',
        type: "line"
        },
        hAxis: {title: 'TTIME value'},
        vAxis: {title: 'VAL value'},
        width: 700,
        height: 500,
        colors: ['#d95f02']

      };

        var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
      }
    </script>

  </head>

  <body>

    <div id="line_chart" style="width: 900px; height: 500px"></div>

    <?php
     //close the db connection
    mysqli_close($dblink);
    ?>

  </body>
</html>


  [1]: https://i.stack.imgur.com/iTRPR.png
javascript php google-visualization iot linechart
1个回答
0
投票

您仅在图表中显示一组值。

您必须在 JavaScript 中循环遍历 PHP 

$ndata
数组才能在图表上绘制所有值。

  1. index.php：只需保留循环的这一部分即可。删除额外的作业：
while ($data = mysqli_fetch_array($results)){
    $ndata[$count]['TTIME'] = $data['TTIME'];
    $ndata[$count]['VAL'] = $data['VAL'];
    $count++;
}
  1. test.php：修改你的 JavaScript：
google.charts.load('current', {'packages':['Line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var dataArr = [['TTIME', 'VAL']]; // Column names

    // Loop through PHP array to add all data points
    <?php foreach ($ndata as $data): ?>
        dataArr.push(['<?php echo $data['TTIME'];?>', <?php echo $data['VAL'];?>]);
    <?php endforeach; ?>

    var data = google.visualization.arrayToDataTable(dataArr);
    // ... Rest of your chart settings and drawing code
}

发生什么事了？我们不是只绘制一个数据点，而是循环遍历所有 

$ndata
值并将它们添加到图表中。

index.php

<?php

ini_set('memory_limit','512M');
ini_set('display_errors', 1);
error_reporting(E_ALL);

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'DEMO';

$dblink = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

// Check connection
if (!$dblink) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully<br />";

$sql = ("Select P.ID, P.NAME, P.OID, MP.POLLID, MP.TTIME, MP.VAL, M.MOID, M.NAME, G.MOID, G.DEVICEID, G.COMMUNICATION FROM PolledData P LEFT join MULTI_POINT_SENSOR_DATA7_9_2023 MP on P.ID=MP.POLLID LEFT join ManagedObject M on P.ID=M.MOID LEFT join GatewayDevice G on M.MOID=G.MOID where MP.VAL IS NOT NULL LIMIT 350"); 

$results = mysqli_query($dblink, $sql); 
if (!$results) { 
    exit("Database query failed.");
}
echo 'DB in<br />';

$ndata = [];
$count = 0;
while ($data = mysqli_fetch_array($results)){
    $ndata[$count]['TTIME'] = $data['TTIME'];
    $ndata[$count]['VAL'] = $data['VAL'];
    $count++;
}

print_r($ndata);

?>

测试.php

<?php include "index.php"; ?>
<html>
<head>
    <title>index</title>
    <link rel="shortcut icon" href="#">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['Line']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var dataArr = [['TTIME', 'VAL']];

            <?php foreach ($ndata as $data): ?>
                dataArr.push(['<?php echo $data['TTIME'];?>', <?php echo $data['VAL'];?>]);
            <?php endforeach; ?>

            var data = google.visualization.arrayToDataTable(dataArr);

            var options = {
                chart: {
                    title: 'TTIME and VAL',
                    type: "line"
                },
                hAxis: {title: 'TTIME value'},
                vAxis: {title: 'VAL value'},
                width: 700,
                height: 500,
                colors: ['#d95f02']
            };

            var chart = new google.charts.Line(document.getElementById('line_chart'));
            chart.draw(data, google.charts.Line.convertOptions(options));
        }
    </script>
</head>
<body>
    <div id="line_chart" style="width: 900px; height: 500px"></div>

    <?php
        //close the db connection
        mysqli_close($dblink);
    ?>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.