Javascript 通过PHP函数动态获取图表数据

我尝试使用从数据库获取数据的php函数动态构建MorrisChart的数据参数。 在我的index.php中，我尝试调用函数并通过AJAX加载数据。我使用中的代码将其实现到自己的代码中

下面是我放在页面索引底部的

，php

在
`标记之前：

<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>

下面是函数
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行示例的div：

我认为这是应该与此设置很好，但不幸的是，它没有。AJAX请求是否有问题？
第一个问题：用以下内容替换
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
）时，您会将它转换为一个json字符串（而不是一个包含对象的数组），Morris插件无法使用它

（可能还有其他问题，但请先尝试一下）
这仍然不会改变任何情况
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;
}