Question

您好我是网页设计新手，我的一些行话可能有误。我试图为讲座创建一个图表，显示每个讲座得到的平均评分。我已经计算了18个讲座中每个讲座的平均值。现在我想取每个值并将其作为图中的值插入。

以下是我查询和输出讲座的方法：

IF ([A1_QTY]+[B1_QTY] = 0) THEN (NULL) ELSE (ROUND(([A1_SCHEDQTY]+[B1_SCHEDQTY]) / ([A1_QTY]+[B1_QTY]) * 100, 1))

然后，<?php ini_set('display_errors', 1); include ('connection.php'); $queryLecture = "SELECT DISTINCT lectureID FROM LectureReview ORDER BY lectureID"; $resultLecture = $mysqli->query($queryLecture); while ($rowLecture = $resultLecture->fetch_assoc()) { echo "<div class=\"row\">"; echo "<div class=\"box\">Lecture{$rowLecture['lectureID']}:</div>"; $lectureID = $rowLecture['lectureID']; $mysqli2 = new mysqli($hostname, $username, $password, $database); $stmt = $mysqli2->prepare("SELECT AVG( lectureReview ) AS lectureAvg FROM LectureReview WHERE lectureID = ?"); $stmt->bind_param('i', $lectureID); $stmt->execute(); $stmt->bind_result($lectureAvg); $stmt->fetch(); echo "<div class=\"box\">Average Lecture Rating: {$lectureAvg}</div>"; echo "</div>"; } ?>我这样做：

OnLoad

我的目标容器：

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme1",
    title:{
        text: "Average Lecture Score"              
    },
    animationEnabled: true,   
    data: [              
        {
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: [
                { label: "Lecture 1", y: 4.5 },
                { label: "Lecture 2", y: 4.5 },
                { label: "Lecture 3", y: 5.0 },
                { label: "Lecture 4", y: 5.0 },
                { label: "Lecture 5", y: 5.0 },
                { label: "Lecture 6", y: 5.0 },
                { label: "Lecture 7", y: 5.0 },
                { label: "Lecture 8", y: 5.0 },
                { label: "Lecture 9", y: 5.0 },
                { label: "Lecture 10", y: 5.0 },
                { label: "Lecture 11", y: 5.0 },
                { label: "Lecture 12", y: 5.0 },
                { label: "Lecture 13", y: 5.0 },
                { label: "Lecture 14", y: 5.0 },
                { label: "Lecture 15", y: 5.0 },
                { label: "Lecture 16", y: 5.0 },
                { label: "Lecture 17", y: 5.0 },
                { label: "Lecture 18", y: 5.0 },
            ]
        }
    ]
});
chart.render();

At the moment it looks like this

如何将数据库中的值用于CanvasJS图？

Answer 1

我就是这样做的：

首先，在<{1}}循环外部创建一个数组。这将保留图表的总数据集。所以：

while

然后，在内部$dataset = array();循环，创建另一个数组。该数组将存储讲座名称及其平均评级。此数组将具有关联名称while和label（在图表数据集中使用）。

y

在循环结束时，您将$lectureRating = array();和$lectureID添加到该数组。然后将其添加到$lectureAvg数组。

$dataset

while循环完成后，$lectureRating['label'] = $lectureID; $lectureRating['y'] = $lectureAvg; array_push($dataset, $lectureRating);数组应该具有类似的结构：

$dataset

我们现在需要将其转换为Javascript对象（JSON），以便js可以解释它。这是通过编码来完成的。

Array[n] ( [0] Array[2]( ['label'] => "Lecture ID 1" ['y'] => 4.3 ) [1] Array[2]( ['label'] => "Lecture ID 2" ['y'] => 3.7 ) // And so on )

这会将上面的数组变成这样的东西（看起来很熟悉？）：

$graphData = json_encode($dataset);

然后可以将其输出到图表的[{"label": "Lecture ID 1", "y": 4.3}, {"label": "Lecture ID 2", "y": 3.7}]对象中。

dataPoints

如何获取生成的值并插入图表？

1 个答案: