javascript - 使用 JSON、JQUERY 和 AJAX 创建图表
问题描述
我正在尝试使用已使用 PHP 从数据库中检索到的 JSON 数据填充图表。在开始使用 stackoverflow 之前,我已经做了一些研究。我正在使用anychart 的条形图格式。下面是我的PHP代码:
if (isset($_POST['myData'])){
$integer = $_POST['myData'];
if ($integer === "3"){
include 'db_connection.php';
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$return_arr3 = array();
$query = "SELECT Wins, Loses, Draws FROM `record` WHERE Year = '2019/2020'";
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result)){
$wins = $row['Wins'];
$loses = $row['Loses'];
$draws = $row['Draws'];
$return_arr3[] = array("Wins" => $wins,
"Loses" => $loses,
"Draws" => $draws);
echo($return_arr3);
}
// Encoding array in JSON format
echo json_encode($return_arr3);
}
然后这是我的 HTML 代码。
<div id="minutes_popup" class="popupcontainer">
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
</div>
最后,这是我的 JavaScript 代码。
$("#minutes").click(function(){
alert("Button works");
$("#minutes_popup").toggle();
var integer = $("#minutes").attr("name");
alert("integer: " + integer);
$.ajax('includes/test.php', {
type: 'POST', // http method
data: {myData: integer},// data to submit
dataType: 'json',
success: function(response){
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile("includes/test.php", function (response) {
// create a chart and set loaded data
chart = anychart.bar(response);
chart.container("minutes_popup");
chart.draw();
});
});
}
});
});
由于某些我不知道的原因,此代码不起作用。控制台上没有出现错误,数据以这种格式回显到控制台:
[{“赢”:“34”,“输”:“19”,“平局”:“10”}]
但是,没有创建条形图。
如果有人能告诉我如何修复我的代码,我将不胜感激。
解决方案
推荐阅读
- python - 在 python 上测试烧瓶 API 时遇到错误 403
- jquery - Laravel:如何使用 jQuery 验证来测试数据库中是否已经存在某些内容
- c# - 是否可以将 XAML 资源字典样式转换为与 c# 等效的样式?
- javascript - 未捕获的 RangeError:超过最大调用堆栈大小 Javascript
- java - 在java中获取绝对路径的最后一个元素有更好的方法吗?
- javascript - 从html响应nodejs中提取文本值
- amazon-web-services - Ubuntu 16.04,Couchbase 服务器,内部 ip 被解析为外部客户端
- .net - 从 C++ 中的 SortedDictionary 迭代时删除项目
- json - 删除 Json 编码额外的括号
- javascript - 向可观察响应添加附加参数