显示从MYSQL数据库到Morris.js PHP AJAX的数据

Question

我想精确地将数据库中的数据显示到图表Morris.js中。 我需要从下拉菜单中选择一个分支，当我选择一个分支时，该分支的总销售额应转移到Morris.js条形图中。 我在将数据传输到条形图时遇到问题。 我正在使用AJAX，PHP和Morris.js。

下拉式PHP代码：

<select class="form-control" id="t-yearly">
    <option value="">Branch</option>
    <?php
        require_once "connect.php";

        $sql = "SELECT id,branch FROM tblLocation";
        $result = mysqli_query($conn,$sql);

        while ($row = mysqli_fetch_array($result)) {
            echo "<option value='".$row['id']."'>".$row['branch']."</option>";
        }
    ?>
</select>

用于图表显示的AJAX代码：

//Total Yearly Sales
$("#t-yearly").change(function(){
    var branch = $(this).val();
    $.ajax ({
        url:"fetch_yearly_sales.php",
        method: "POST",
        data: {branch:branch},
        success: function(branch_data){
             new Morris.Bar({
                element: 't-yearly-sales',
                data: branch_data,
                xkey: 'year',
                ykeys: ['sales'],
                labels: ['Total Sales'],
                hideHover: 'auto'
             });
             console.log(branch_data);
        }
    });
});

fetch_yearly_sales.php的PHP代码：

<?php 
require "connect.php";


$data = mysqli_real_escape_string($conn,$_POST["branch"]);

$ar = array();

if(!empty($data)){
    $sql = "SELECT year, SUM(sales) AS sales FROM tblSales WHERE branch_id=".$data." GROUP BY year";
    $result = mysqli_query($conn, $sql);

    while ($row = mysqli_fetch_array($result)) {
        $ar[] = array(
            'year' => $row['year'],
            'sales' => $row['sales']
        );
    }

    echo json_encode($ar);
} 
else if (empty($data)){
    $sql = "SELECT year, SUM(sales) AS sales FROM tblSales GROUP BY year";
    $result = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_array($result)) {
        $ar[] = array(
            'year' => $row['year'],
            'sales' => $row['sales']
        );
    }

    echo json_encode($ar);
}

Answer 1

您没有指定遇到的问题，但是从代码中看，您似乎正在将JSON字符串传递给Morris，而实际上却需要一个JSON对象。 因此，尝试将data: branch_data为data: JSON.parse(branch_data) 。 不过我可能是错的，如果您指定确实不起作用的话会有所帮助。

Answer 2

我想您需要使用函数setData（）而不是始终创建新图表。 这将使用参数中给定的数据更新图表。 您需要更改为以下内容：

var branch_data = [];
var my_chart = new Morris.Bar({
                element: 't-yearly-sales',
                data: branch_data,
                xkey: 'year',
                ykeys: ['sales'],
                labels: ['Total Sales'],
                hideHover: 'auto'
             });

$("#t-yearly").change(function(){
    var branch = $(this).val();
    $.ajax ({
        url:"fetch_yearly_sales.php",
        method: "POST",
        data: {branch:branch},
        dataType: "json",
        success: function(branch_data){
             my_chart.setData(branch_data);
        }
    });
});

顺便说一句，我在上面的代码中提到了将dataType转换为JSON的方式，因此您无需解析服务器的结果。