个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:13:43 24 4
gpt4 key购买 nike

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

Screenshot shows database figures being pulled out top of page: 

        <?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...

enter image description here

最佳答案

我错过了 $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
文章推荐： jquery - 页面重新加载后保持当前 Bootstrap 选项卡处于事件状态，而不会跳转到之间的第一个选项卡
文章推荐： javascript - 添加几天后 MomentJs 无效日期
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com