javascript - 我需要将表格中的数据提取到 JavaScript 图表中

Question

我有一个 javascript 饼图，我需要从我的一个表中填充数据，我有一个 users 表，其中包含一个名为 idUsers 的字段，我有用于 session ID。

我有一个名为 modules 的表，其中包含 moduleID 和 moduleName，然后我有一个介于两者之间的连接表，名为 UserTakingModule，该表有一个字段称为检查点，它基本上包含一个数字(指的是幻灯片中的页面)，因此用户知道他们最后一次在哪里。我正在尝试使用那个 checkPoint 来填充我的图表数据。因此，如果用户已经到达模块中的某个点，请使用它。但是我无法让它工作，请有人指出我做错了什么，真的很挣扎。目前js饼图中完全没有数据出现。

$query = "SELECT * FROM `userTakingModule` WHERE `idUsers` = '".$_SESSION['id']."' ";

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

    while($row = $result -> fetch_assoc()) 
          {
      $mod1=$row['checkPoint'];
//    $mod2=$row[''];
//    $mod3=$row[''];
//    $mod4=$row[''];
//    $mod5=$row[''];
//    $mod6=$row[''];
          }
?>

        <script type="text/javascript">
            var ctx = document.getElementById("my3Chart");
            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Time Management", "Career Coach", "Stress & Wellbeing", "Note Taking", "Exam Prep", "Presentations"],
                    datasets: [{
                        label: '# of Votes',
                        data: [<?php echo $mod1?>, <?php echo $mod2?>, <?php echo $mod3?>, <?php echo $mod4?>, <?php echo $mod5?> ,<?php echo $mod6?>],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
            </script>

更新:如果我只是在图表中的数据标签下硬编码值，饼图看起来很好，我认为这与 SQL 查询有关，也许我几乎需要说，向我显示此已登录用户下 ModuleID'x' 的 checkPoint？

Answer 1

尝试像这样使用 implode:

$query = "SELECT * FROM `userTakingModule` WHERE `idUsers` = '".$_SESSION['id']."' ";

    $result = $conn -> query($query);
    $mod = Array();
    while($row = $result -> fetch_assoc()) 
    {
          $mod[]=$row['checkPoint'];

    }
    $data = implode(',',$mod);
?>    
        <script type="text/javascript">
            var ctx = document.getElementById("my3Chart");
            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Time Management", "Career Coach", "Stress & Wellbeing", "Note Taking", "Exam Prep", "Presentations"],
                    datasets: [{
                        label: '# of Votes',
                        data: [<?php echo $data?>],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
            </script>