我需要将表中保存的数据提取到javascript图表中

Question

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

我有一个名为modules的表，它保存了moduleID和moduleName，然后我在两者之间有一个名为UserTakingModule的连接表，这个表有一个名为checkPoint的字段，它基本上包含一个数字（表示幻灯片中的页面） ，因此用户知道他们的去向。我正在尝试使用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查询有关，我几乎可以说，在这个登录的用户下，向我展示checkPoint的ModuleID'x'？

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>