错误

Question

我有一个包含

的图表

<script type="text/javascript">

console.log('{{ $cpe_mac }}');

var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {

console.log(data)

var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];

for (var i = 0; i < data.hour_g_up.length; i++) {

    array_hour_g_down[i] = {"value":data.hour_g_down[i]};
    array_hour_g_up[i]   = {"value":data.hour_g_up[i]};
    array_hour_p_down[i] = {"value":data.hour_p_down[i]};
    array_hour_p_up[i]   = {"value":data.hour_p_up[i]};

}

var granular_time_network_day = new FusionCharts({
    "type": "msstackedcolumn2d",
    "renderAt": "granular-time-network",
    "width": "100%",
    "dataFormat": "json",
    "dataSource": {
        "chart": {
            "caption": "Time-Based Bandwidth Usage",
            "subcaption": "Daily View",
            "xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
            "yaxisname": "Bandwidth (in Megabytes)",
            "paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
                    // "numbersuffix": "MB",
                    "showvalues": "0",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "showXAxisLine": "1",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "divLineDashed": "1",
                    "showAlternateHGridColor": "0",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
                },
                "categories": [{
                    "category": [{
                        "label": "12am-2am"
                    }, {
                        "label": "2am-4am"
                    }, {
                        "label": "4am-6am"
                    }, {
                        "label": "6am-8am"
                    }, {
                        "label": "8am-10am"
                    }, {
                        "label": "10am-12pm"
                    }, {
                        "label": "12pm-2pm"
                    }, {
                        "label": "2pm-4pm"
                    }, {
                        "label": "4pm-6pm"
                    }, {
                        "label": "6pm-8pm"
                    }, {
                        "label": "8pm-10pm"
                    }, {
                        "label": "10pm-12am"
                    }]
                }],
                "dataset": [{
                    "dataset": [{
                        "seriesname": "Home Network - Downlink",
                        "data": array_hour_p_down
                    }, {
                        "seriesname": "Home Network - Uplink",
                        "data": array_hour_p_up
                    }]
                }, {
                    "dataset": [{
                        "seriesname": "Guest Network - Downlink",
                        "data": array_hour_g_down
                    }, {
                        "seriesname": "Guest Network - Uplink",
                        "data": array_hour_g_up
                    }]
                }]
            }
        });

});


</script>

我将代码包装在 ajax.done（）中，因为我不希望我的页面加载等待数据并在数据到达后立即呈现图表。但现在我面临另一个问题。

Uncaught ReferenceError: granular_time_network_day is not defined

错误

    $('#granular-time').on('click', function() {
        $('#granular-total-view').hide();
        $('#granular-time-view').fadeIn('slow');
        granular_time_network_day.render();
        granular_time_device_day.render();
        $('#btn-interval').prop('disabled', false);
    });

我应该在这做什么伎俩？

如何防止这种情况发生？

我的Ajax上有什么问题吗？

我应该调查承诺还是类似的东西？

对此的任何提示都将非常感谢！

Answer 1

您需要在ajax.done函数之外定义granular_time_network_day

Answer 2

我建议在调用render之前检查granular_time_network_day是否存在。

示例：

$('#interval-day').on('click',function(){
    if (granular_time_network_day) {
        granular_time_network_day.render();
    } else {
        //tell user that the data is still being retrieved or handle another way
    }
});

我确实注意到与在done调用中声明的变量相关的潜在其他问题 - granular_time_network_day将仅在done函数的范围内。它可以在done函数之外声明它，这样当ajax调用完成时，click处理程序将能够访问它。

Answer 3

定义.done()回调之外的功能，即使呼叫尚未完成，点击也会发现它。

修改

您无需检查功能是否可用，您需要检查并查看是否还有$.ajax来电中的数据：

var data = null;

$.ajax().done(function(data) {
    // assign data
    data = data;
});

$('#granular-time'.on('click', function() {
    // check to see if you have data
    if (data) {
        // do your stuff
        var granular_time_network_day = new FusionCharts({
        "type": "msstackedcolumn2d",
        "renderAt": "granular-time-network",
        "width": "100%",
        "dataFormat": "json",
            ....
        })
    }
});

}）;

Answer 4

窗口。

证明window.拯救了我的生命，以及我正在寻找的答案。

这是我的最终剧本

<script type="text/javascript">

var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {

    console.log(data)

    var array_hour_g_down = [];
    var array_hour_g_up = [];
    var array_hour_p_down = [];
    var array_hour_p_up = [];

    for (var i = 0; i < data.hour_g_up.length; i++) {

        array_hour_g_down[i] = {"value":data.hour_g_down[i]};
        array_hour_g_up[i]   = {"value":data.hour_g_up[i]};
        array_hour_p_down[i] = {"value":data.hour_p_down[i]};
        array_hour_p_up[i]   = {"value":data.hour_p_up[i]};

    }

    window.granular_time_network_day = new FusionCharts({
        "type": "msstackedcolumn2d",
        "renderAt": "granular-time-network",
        "width": "100%",
        "dataFormat": "json",
        "dataSource": {
        "chart": {
            "caption": "Time-Based Bandwidth Usage",
            "subcaption": "Daily View",
            "xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
            "yaxisname": "Bandwidth (in Megabytes)",
            "paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
                    // "numbersuffix": "MB",
                    "showvalues": "0",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "showXAxisLine": "1",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "divLineDashed": "1",
                    "showAlternateHGridColor": "0",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
                },
                "categories": [{
                    "category": [{
                        "label": "12am-2am"
                    }, {
                        "label": "2am-4am"
                    }, {
                        "label": "4am-6am"
                    }, {
                        "label": "6am-8am"
                    }, {
                        "label": "8am-10am"
                    }, {
                        "label": "10am-12pm"
                    }, {
                        "label": "12pm-2pm"
                    }, {
                        "label": "2pm-4pm"
                    }, {
                        "label": "4pm-6pm"
                    }, {
                        "label": "6pm-8pm"
                    }, {
                        "label": "8pm-10pm"
                    }, {
                        "label": "10pm-12am"
                    }]
                }],
                "dataset": [{
                    "dataset": [{
                        "seriesname": "Home Network - Downlink",
                        "data": array_hour_p_down
                    }, {
                        "seriesname": "Home Network - Uplink",
                        "data": array_hour_p_up
                    }]
                }, {
                    "dataset": [{
                        "seriesname": "Guest Network - Downlink",
                        "data": array_hour_g_down
                    }, {
                        "seriesname": "Guest Network - Uplink",
                        "data": array_hour_g_up
                    }]
                }]
            }
        });

});


</script>

我不再收到错误。

如何处理Ajax数据尚未到达？

错误

4 个答案:

修改

窗口。