php - 使用 JSON 将数组数据传递给 Morris Chart

Question

我想从我的 Ajax Success 返回中将动态数组数据传递给 Morris Charts。

我来获取折线图的所有数据。

如何使用此代码在 this.createAreaChartDotted 参数中发送 data.json 和 data.y？

!function($) {
"use strict";

    var MorrisCharts = function() {};

    //creates area chart with dotted
    MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
        Morris.Area({
            element: element,
            pointSize: 3,
            lineWidth: 1,
            data: data,
            xkey: xkey,
            ykeys: ykeys,
            labels: labels,
            hideHover: 'auto',
            pointFillColors: Pfillcolor,
            pointStrokeColors: Pstockcolor,
            resize: true,
            gridLineColor: '#eef0f2',
            lineColors: lineColors
        });
    },

    MorrisCharts.prototype.init = function() {
        var id_transmetteur = $('#id_transmetteur').val();
        var table_name = $('#table_name').val();
        var category_table = $('#category_table').val();

        $.ajax({
          method:"post",        
          dataType: 'json',
          url: $('#ajax').val()+'getDataCapteurs.php',
          success: function(data){
            if(data.status == 'success'){
                console.log(data.json); //Replace $areaDotData
                console.log(data.y); //Replace ['a', 'b'] in this.createAreaChartDotted()
            } else if(data.status == 'error'){
              if(data.messages.length>0){     
                var i;
                for (i = 0; i < data.messages.length; ++i) {
                    if(data.messages[i][0] == 'error'){
                        console.log('error');
                    }
                }
              }
            }
          }
        });

        //creating area chart with dotted
        var $areaDotData = [
                    { y: '2009', a: 10, b: 20 },
                    { 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: 90, b: 60 }
                ];
        this.createAreaChartDotted('morris-area-with-dotted', 0, 0, $areaDotData, 'y', ['a', 'b'], ['Series A', 'Series B'],['#ffffff'],['#999999'], ['#52bb56', '#ebeff2']);

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

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

我试图在 MorrisCharts.prototype.init = function(){ var data_chart; 之后声明一个变量 ...} 并在 ajax 成功：data_chart = data.json 但是当我测试我的变量时，她是未定义的。

感谢您的帮助。

标签： phpjquerymorris.js

Answer 1

您将无法从 ajax 调用中的成功回调外部访问该数据。因此，请在成功回调中执行您需要执行的任何操作。尝试从 ajax 调用中初始化 Morris 图表。

!function($) {
"use strict";

var MorrisCharts = function() {};

//creates area chart with dotted
MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
    Morris.Area({
        element: element,
        pointSize: 3,
        lineWidth: 1,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        hideHover: 'auto',
        pointFillColors: Pfillcolor,
        pointStrokeColors: Pstockcolor,
        resize: true,
        gridLineColor: '#eef0f2',
        lineColors: lineColors
    });
},

MorrisCharts.prototype.init = function(data, yData) {
    this.createAreaChartDotted('morris-area-with-dotted', 0, 0, data, 'y', yData, ['Series A', 'Series B'],['#ffffff'],['#999999'], ['#52bb56', '#ebeff2']);
},
//init
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = 
MorrisCharts
}(window.jQuery),

function($) {
"use strict";

var id_transmetteur = $('#id_transmetteur').val();
var table_name = $('#table_name').val();
var category_table = $('#category_table').val();

$.ajax({
    method:"post",        
    dataType: 'json',
    url: $('#ajax').val()+'getDataCapteurs.php',
    success: function(data){
    if(data.status == 'success'){
        var data = data.json;
        var yData = data.y;

        //Send data & Yaxis
        $.MorrisCharts.init(data, yData);

    } else if(data.status == 'error'){
        if(data.messages.length>0){     
        var i;
        for (i = 0; i < data.messages.length; ++i) {
            if(data.messages[i][0] == 'error'){
                console.log('error');
            }
        }
        }
    }
    }
});
}(window.jQuery);