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

嗨我是新來的網頁設計和我的一些行話可能是錯的。我正在嘗試創建一個講座圖表，顯示每個講座獲得的平均評分。我已經計算了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>

At the moment it looks like this

如何使用CanvasJS圖形的數據庫值？

來源

2016-01-15 connor woolley

這是我會怎麼做：

首先，創建一個數組外您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; ?> 
    }

來源

2016-01-15 16:56:55 ImClarky

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

回答

相關問題