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>

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

1 个答案: