JavaScript — как мне взять сгенерированное значение и вставить в график?

Question

JavaScript — как мне взять сгенерированное значение и вставить в график?

Привет, я новичок в веб-дизайне, и некоторые из моих жаргонов могут быть не правы. Я пытаюсь создать график для лекций, который показывает средний рейтинг каждой лекции. Я уже подсчитал среднее для каждой из 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?

2

canvasjs javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вот как я бы это сделал:

Во-первых, создать массив вне ваш while петля. Это будет содержать общий набор данных для вашего графика. Так:

$dataset = array();

Затем, внутри ваш while цикл, создать еще один массив. Этот массив будет хранить название лекции и ее средний рейтинг. Этот массив будет иметь ассоциативные имена label а также y (используется в вашем наборе данных диаграммы).

$lectureRating = array();

В конце цикла вы затем добавляете $lectureID и $lectureAvg к этому массиву. А затем добавить его в $dataset массив.

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

После окончания цикла $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 Object (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; ?>
}

0