如何獲取生成的值並插入到圖形中？

Question

嗨，我是網頁設計的新手，我的一些行話可能是錯誤的。 我正在嘗試為講座創建一個圖表，以顯示每個講座獲得的平均評分。 我已經計算了18堂課的平均成績。 現在，我要獲取每個值，並將其作為值插入到圖形中。

這是我查詢和輸出講座的方式：

<?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();

而我的目標容器：

<div id="chartContainer"
    style="height: 300px; width: 90%; position: absolute; padding-top:50px;">
</div>

目前看起來像這樣

如何將數據庫中的值用於CanvasJS圖？

Answer 1

這就是我要做的：

首先， 在 while循環之外創建一個數組。 這將保留圖形的總數據集。 所以：

$dataset = array();

然后， 在 while循環中，創建另一個數組。 該數組將存儲講座名稱及其平均評分。 該數組將具有關聯名稱label和y （在圖表數據集中使用）。

$lectureRating = array();

在循環的最后，您將$lectureID和$lectureAvg到該數組。 然后將其添加到$dataset數組中。

$lectureRating['label'] = $lectureID;
$lectureRating['y'] = $lectureAvg;
array_push($dataset, $lectureRating);

在while循環完成之后， $dataset數組應具有與以下類似的結構：

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
)

現在，我們需要將其轉換為Javascript對象（JSON），以便js可以解釋它。 這是通過編碼完成的。

$graphData = json_encode($dataset);

這會將上面的數組變成這樣（看起來很熟悉？）：

[{"label": "Lecture ID 1", "y": 4.3}, {"label": "Lecture ID 2", "y": 3.7}]

然后可以將其輸出到圖表的dataPoints對象。

data: [
    {
        type: "column",
        dataPoints: <?php echo $graphData; ?>
    }