首页 > 解决方案 > 使用 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”}]

但是,没有创建条形图。

如果有人能告诉我如何修复我的代码,我将不胜感激。

标签: javascriptphphtmljqueryajax

解决方案


推荐阅读