gpt4 book ai didi

javascript - 如何查询数据库并动态绘制仪表板上的值?

转载 作者:行者123 更新时间:2023-11-30 22:23:46 28 4
gpt4 key购买 nike

我对仪表板的东西很陌生。学习 PHP 和 javascript。我试图在已经可用的 google-chart 的帮助下创建一个饼图。我可以做到(因为数据是硬编码的)。我正在尝试用动态值绘制饼图(查询数据库并在饼图上绘制值)。我正在尝试这样做,但做不到。你能帮我实现这个目标吗(MySQL,比如 2 列名称和分数)。

工作代码[对于静态数据]:

<html>
<head>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

**var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);**

var options = {
title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

我理解上面突出显示的部分执行加载静态数据的工作。

尝试使用与数据库相关的 PHP 嵌入上述脚本。可能,我可能无法以正确的方式调用它。你能帮我提供缺少的接口(interface)吗?我对所有这些技术都很陌生。

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbName = "test";
$conn = new mysqli($servername, $username, $password, $dbName);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$query = "SELECT * FROM student";

$result = $conn->query($query);

$jsonArray = array();

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
$jsonArrayItem = array();
$jsonArrayItem['label'] = $row['Name'];
$jsonArrayItem['value'] = $row['Scores'];
array_push($jsonArray, $jsonArrayItem);
}
}

$conn->close();

header('Content-type: application/json');

echo json_encode($jsonArray);
?>

最佳答案

介绍

好吧,如果你的代码工作正常,我想你目前已经制作了一个 php 脚本,它以你需要的格式吐出一个 JSON 文档。

现在您需要使用 javascript 实际加载数据并将其提供给图表 API。

因此,不是在 var data = google.visualization.arrayToDataTable 处提供硬编码数组,而是需要从 php 脚本 加载它。

查看以下使用纯 JS 或 JQuery 解决此问题的链接:

JQuery 示例

请记住,调用是异步的,因此您需要在处理 ajax 调用的监听器中(或由)触发您的图表逻辑。

$.getJSON('http://localhost/myApp/myScript.php&callback', function(data) {
var data = google.visualization.arrayToDataTable(data);

var options = {
title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
});

关于javascript - 如何查询数据库并动态绘制仪表板上的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35934798/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com