javascript - PHP 未显示在 Chart.js 的数据部分中-6ren

javascript - PHP 未显示在 Chart.js 的数据部分中

转载作者：行者123 更新时间：2023-12-01 01:13:43

24

4

我已经成功让 PHP 和 JavaScript 代码在同一页面上运行。在左侧页面的顶部，您可以看到我的 php 表中的数字已正确提取，但是，当我将 php 代码粘贴到需要保留表“数据”的位置时，它却没有正确地提取出来。即使被 php 标签包围也无法工作。

        <?php
    $conn = mysqli_connect("localhost", "x", "y", "z");

    $query = "SELECT * FROM `checkPointMod`";


    $result = $conn -> query($query);


    while($row = $result -> fetch_assoc()) 
      {
        echo $row['mod1']."<br>";
        echo $row['mod2']."<br>";
        echo $row['mod3']."<br>";
        echo $row['mod4']."<br>";
        echo $row['mod5']."<br>";
        echo $row['mod6']."<br>";
      }



    $conn -> close();
    ?>


    <!DOCTYPE html>
        <html lang="en-GB">
        <head>
            <meta charset="UTF-8">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

        </head>

        <body style="background-color: lightgrey;">


    <div class="col-md-4 text-center">Third of Page - Middle section with progress bar
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>

    <script type="text/javascript">
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [<?php echo $row['mod1']?>, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    </script>

    </html>

更新: - 我已经去检查元素以查看输出是什么，并且在此处看到了它，我还放置了 mod2 以查看是否会出现 6...

最佳答案

我错过了 $row 仅存在于 while 循环内。

将 while 循环替换为:

$rows = [];
while ($row = $result -> fetch_assoc()) $rows[] = $row;

在 Javascript 代码中，将其添加到顶部:

const data = <?= json_encode($rows, JSON_NUMERIC_CHECK) ?>;

您应该在页面源代码中看到以下内容:

const data = [{ "checkPID": 6, "mod1": 0, "mod2": 6, "mod3": 0, "mod4": 3, "mod5": 2, "mod6": 1, "idUsers": 1 }];

现在您可以在图表设置中执行此操作:

data: Object.keys(data[0]).filter(key => key.startsWith("mod")).map(key => data[0][key]),

关于javascript - PHP 未显示在 Chart.js 的数据部分中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54946981/

24

4

0

文章推荐： python - PyQt5 - 默认日期时间为 QDateTimeEdit

文章推荐： VBA Word 格式化 Selection.typetext

文章推荐： javascript - 添加几天后 MomentJs 无效日期

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - PHP 未显示在 Chart.js 的数据部分中