通過PHP函數動態獲取MorrisChart數據

Question

我嘗試使用從數據庫獲取數據的php函數動態構建MorrisChart的data參數。 在我的index.php中，我嘗試調用該函數並通過AJAX加載數據。 我使用此答案中的代碼將其實現為自己的代碼。

這是我在頁面index.php底部放在`標記before the <script> ：

<script type="text/javascript">
var $dataForChart1;
function reqListener () {
    console.log(this.responseText);
}

var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
    //This is where you handle what to do with the response.
    //The actual data is found on this.responseText
    !function($) {
    "use strict";

    var MorrisCharts = function() {};

    //creates line chart
    MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
        Morris.Line({
        element: element,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true, //defaulted to true
        lineColors: lineColors
        });
    },
    MorrisCharts.prototype.init = function() {

        //create line chart
        var $data  = this.responseText; //<-- Here we should get the data
        this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#3292e0', '#dcdcdc']);


    },
    //init
    $.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts;
}(window.jQuery),

//initializing 
function ($) {
    "use strict";
    $.MorrisCharts.init();
}(window.jQuery);

};
oReq.open("get", "get-data.php", true);
//                               ^ Don't block the rest of the execution.
//                                 Don't wait until the request finishes to 
//                                 continue.
oReq.send();

</script>

文件get-data.php包含以下代碼：

<?php 
/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 * 
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well. 
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

include("./assets/php/functions.php");

echo json_encode(getMorrisExampleData()); //In the end, you need to echo the result. 
                      //All data should be json_encode()d.

                      //You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

?>

這是函數getMorrisExampleData()樣子：

function getMorrisExampleData(){
$data = "[
        { y: '2009', a: 100, b: 90 },
        { y: '2010', a: 75,  b: 65 },
        { y: '2011', a: 50,  b: 40 },
        { y: '2012', a: 75,  b: 65 },
        { y: '2013', a: 50,  b: 40 },
        { y: '2014', a: 75,  b: 65 },
        { y: '2015', a: 100, b: 90 }
      ]";

return $data;
}

當然，我在index.php有一個id為morris-line-example <div id="morris-line-example" style="height: 300px"></div> ： <div id="morris-line-example" style="height: 300px"></div>

我認為使用此設置應該可以正常工作，但不幸的是，它不能。 我對AJAX請求做錯了嗎？

Answer 1

第一個問題：將getMorrisExampleData()替換為此：

function getMorrisExampleData(){
    $data = array(
        array("y" => 2009, "a" => 100, "b" => 90),
        array("y" => 2010, "a" =>  75, "b" => 65),
        array("y" => 2011, "a" =>  50, "b" => 40),
        array("y" => 2012, "a" =>  75, "b" => 65),
        array("y" => 2013, "a" =>  50, "b" => 40),
        array("y" => 2014, "a" =>  75, "b" => 65),
        array("y" => 2015, "a" => 100, "b" => 90)
    );

    return $data;
}

為什么？ 因為在您的代碼中， $data是一個不是有效JSON的字符串。 此外，在對它進行編碼（使用json_encode ，會將其轉換為Morris插件無法使用的JSON字符串（而不是包含對象的數組）。

（可能還有其他問題，請先嘗試此操作）