如何放置两个chartjs的图表，这样它们都会出现？

Question

我为教师制作了一个页面，他们可以看到学生的分数得分，并且有图表显示每个问题的学生数量正确。我试图放两个图表，但它只显示一个图表而另一个图表一直是空白。我认为问题是否发生，因为两个图表都有相同的名称，但在我更改了图表的其中一个名称后，它仍然只显示其中一个图表。这是我的php / html / js代码：

<?php

if (isset($_GET['question'])) {

    $con = mysqli_connect("localhost", "root", "", "testing");

    if ($con->connect_error) {

        die("Connection failed: " . $con->connect_error);

    }

    $sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='1'";

    $result = mysqli_query($con, $sql);

    $full = mysqli_num_rows($result);

    mysqli_free_result($result);

    $sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='0'";

    $result = mysqli_query($con, $sql);

    $none = mysqli_num_rows($result);

    mysqli_free_result($result);

?>

<script src="jquery-3.3.1.min.js"></script>

<script src="Chart.js"></script>

<div id="canvas"><canvas id="questioncan1" style="height: 25vh; width: 25vh;"></canvas></div>

<script type="text/javascript">

    let myChart = document.getElementById('questioncan1').getContext("2d");

    Chart.defaults.global.defaultFontFamily = "Arial";

    Chart.defaults.defaultFontSize = 18;

    Chart.defaults.global.defaultFontColor = "black";

    let questioncan1 = new Chart(myChart, {

        type: "doughnut",

        data: {

            labels: [

                "Full Credit",
                "No Credit"

            ],

            datasets: [

                {

                    data: [

                        5,
                        15

                    ],

                    backgroundColor: [

                        "#11FF00",
                        "#F7301E"


                    ],

                    borderWidth: 0

                }

            ]

        },

        options: {

            scaleShowLabels: false,
            responsive: false,
            legend: {

                display: false

            }

        }

    });

</script>

<br><br>

<table>

    <tr>

        <th>Name</th>
        <th>Status</th>

    </tr>

    <?php

        $sql = "SELECT * FROM `chapter 7 vocabulary test`";

        $result = $con->query($sql);

        while ($row = $result->fetch_assoc()) {

            $sql2 = "SELECT * FROM `users` WHERE  `snumber`='".$row["snumber"]."'";

            $result2 = $con->query($sql2);

            while ($row2 = $result2->fetch_assoc()) {

                echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";

            }

        }

    ?>

</table>

<script src="jquery-3.3.1.min.js"></script>

<div id="canvas"><canvas id="questioncan" style="height: 25vh; width: 25vh;"></canvas></div>

<script type="text/javascript">

    let myChart = document.getElementById('questioncan').getContext("2d");

    Chart.defaults.global.defaultFontFamily = "Arial";

    Chart.defaults.defaultFontSize = 18;

    Chart.defaults.global.defaultFontColor = "black";

    let questioncan = new Chart(myChart, {

        type: "doughnut",

        data: {

            labels: [

                "Full Credit",
                "No Credit"

            ],

            datasets: [

                {

                    data: [

                        <?php echo $full; ?>,
                        <?php echo $none; ?>

                    ],

                    backgroundColor: [

                        "#11FF00",
                        "#F7301E"


                    ],

                    borderWidth: 0

                }

            ]

        },

        options: {

            scaleShowLabels: false,
            responsive: false,
            legend: {

                display: false

            }

        }

    });

</script>

<br><br>

<table>

    <tr>

        <th>Name</th>
        <th>Status</th>

    </tr>

    <?php

        $sql = "SELECT * FROM `chapter 7 vocabulary test`";

        $result = $con->query($sql);

        while ($row = $result->fetch_assoc()) {

            $sql2 = "SELECT * FROM `users` WHERE  `snumber`='".$row["snumber"]."'";

            $result2 = $con->query($sql2);

            while ($row2 = $result2->fetch_assoc()) {

                echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";

            }

        }

    ?>

</table>

<?php

}

?>

Answer 1

您在全局范围内声明变量“myChart”两次，而不是在单独的函数中声明，因此它只输出其中一个。

将第二张图表设置为：

  let myChart2 = document.getElementById('questioncan2').getContext("2d");

https://jsfiddle.net/xea4qr8k/12/

还建议将div ID更改为唯一，并删除jQuery的第二个脚本src。