时间戳

首页 > 解决方案 > 在图表中显示数据库中的项目

javascript - 在图表中显示数据库中的项目

问题描述

我想在图表中显示每张试卷的平均成绩。我的问题是，当我从数据库中捕获数据时，我将其存储在一个数组中，因此我无法将这些值打印为数组列表，例如 ["a","b","c","d","e"]或[44,100,50.29,100]在 var xValues 和 var yValues 中使用它，我也尝试使用foreach，但它不起作用。请帮忙。

/* 这里是 JS 代码 */

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<script>
    var xValues =<?php foreach($examPapertitle as $title) {
                        echo $title;
                        }; ?>
                        
    var yValues =<?php foreach($avgcountresult as $average) {
                        echo $average;
                        }; ?>
    var barColors = ["red", "green","blue","orange","brown"];

    new Chart("myChart", {
      type: "bar",
      data: {
        labels: xValues,
        datasets: [{
          backgroundColor: barColors,
          data: yValues
        }]
      },
      options: {
        legend: {display: false},
        title: {
          display: true,
          text: "Average of Results"
        }
      }
    });
</script>

/* 这里是 HTML 代码 */

$examPapertitle=array();
$avgcountresult= array();
$fetchresult = mysqli_query($conn, "SELECT AVG(results.percentage), exam_paper.examTitle FROM results INNER JOIN exam_paper ON results.examPaperID = exam_paper.examPaperID GROUP by results.examPaperID ORDER by results.examPaperID");
while($rowresult= mysqli_fetch_assoc($fetchresult)){
    $examPapertitle[] = $rowresult['examTitle'];
    $avgcountresult[] = $rowresult['AVG(results.percentage)'];
}


<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

标签： javascriptphphtml

解决方案

我相信你的问题是你var xValues = 需要一个让我们说的输入，[44,100,50.29,100]而不是你在呼应4410050.29100

因此，您需要echo正确设置这些值，您可以像这样更改 php 块：

var xValues =[<?php foreach($examPapertitle as $k=>$title) {
                        echo $title.($k>0?",":"");
                        }; ?>]

或者使用更容易阅读的功能：

var xValues =[<?php echo implode($examPapertitle,",") ?>]

如果您的值是数字，则需要将这些值括在字符串的引号中，如下所示：

var xValues =["<?php echo implode($examPapertitle,'","') ?>"]

如果您需要有关内爆如何工作的更多信息，您可以在此处查看它的手册

PS：混合 php 和 javascript 时的一个方便提示是始终通过 Web 检查器检查您的 php 输出（也称为浏览器源文件）。它使捕获此类问题变得更加容易。

推荐阅读