在单页上处理两个AJAX调用,以将数据拉到另一页的HighCharts中



我正在尝试使两个高胸罩加载不同的数据。一个从一个URL处理一组数据,另一个可以处理另一组数据。到目前为止,我只有一个图表负载之一,这是一个非常问题。我不确定我是否什至正确地执行此操作,因为我读到在一个页面上有2个Ajax呼叫并不明智,但我不确定。我的数据模型代码如下:

    public data: KnockoutObservableArray<any> = ko.observableArray();
    public incidentData: KnockoutObservableArray<any> = ko.observableArray();
    public plotDataLabels: KnockoutObservableArray<any> = ko.observableArray();
    public plotData: KnockoutObservableArray<any> = ko.observableArray();
    public isLoading: KnockoutObservable<boolean> = ko.observable(false);
    public isLoaded: KnockoutObservable<boolean> = ko.observable(false);
    public loadingError: KnockoutObservable<boolean> = ko.observable(false);
    public load: (month: number, year: number) => void;
    public setPlotData: (data: any) => void;
    public init(myself: MainDashboard) { };
    public incidentPlotData: KnockoutObservableArray<any> = ko.observableArray();
    public incidentSetPlotData: (incidentData: any) => void;
    public incidentIsLoading: KnockoutObservable<boolean> = ko.observable(false);
    public incidentIsLoaded: KnockoutObservable<boolean> = ko.observable(false);

    constructor() {
        var self = this;
        // Call an init function that allows for proper inheritance.
        if ($.isFunction(self.init)) {
            self.init(self);
        }
        self.load = (month: number, year: number) => {
            self.isLoading(true);
            self.isLoaded(false);
            self.incidentIsLoading(true);
            self.incidentIsLoaded(false);
            $.ajax({
                xhrFields: { withCredentials: true },
                url: areaUrl + "api/Change/SixMonthChangeCount",
                success: data => {
                    self.isLoading(false);
                    self.data(data);
                    self.setPlotData(data);
                    self.isLoaded(true);
                },
                error: data => {
                    self.loadingError(true);
                }
            });
            $.ajax({
                xhrFields: { withCredentials: true },
                url: areaUrl + "api/Incident/IncidentCount",
                success: incidentData => {
                    self.incidentIsLoading(false);
                    self.data(incidentData);
                    self.setPlotData(incidentData);
                    self.incidentIsLoaded(true);
                },
                error: incidentData => {
                    self.loadingError(true);
                }
            });
        }
        self.setPlotData = (data: any) => {
            self.plotData.push(
                {
                    name: 'Significant',
                    data: [data.List[5].Significant, data.List[4].Significant, data.List[3].Significant, data.List[2].Significant, data.List[1].Significant, data.List[0].Significant],
                    color: '#fea156'
                },
                {
                    name: 'Normal',
                    data: [data.List[5].Normal, data.List[4].Normal, data.List[3].Normal, data.List[2].Normal, data.List[1].Normal, data.List[0].Normal],
                    color: '#b191c3'
                },
                {
                    name: 'Minor',
                    data: [data.List[5].Minor, data.List[4].Minor, data.List[3].Minor, data.List[2].Minor, data.List[1].Minor, data.List[0].Minor],
                    color: '#83bfd1'
                },
                {
                    name: 'Standard',
                    data: [data.List[5].Standard, data.List[4].Standard, data.List[3].Standard, data.List[2].Standard, data.List[1].Standard, data.List[0].Standard],
                    color: '#72e76d'
                },
                {
                    name: 'Urgent',
                    data: [data.List[5].Urgent, data.List[4].Urgent, data.List[3].Urgent, data.List[2].Urgent, data.List[1].Urgent, data.List[0].Urgent],
                    color: '#fa5a5a'
                }
            );
        }
        self.incidentSetPlotData = (incidentData: any) => {
            self.incidentPlotData.push(
                {
                    name: 'High',
                    data: [incidentData.List[0].High, incidentData.List[1].High, incidentData.List[2].High],
                    color: '#fea156'
                },
                {
                    name: 'Critical',
                    data: [incidentData.List[0].Critical, incidentData.List[1].Critical, incidentData.List[2].High],
                    color: '#fa5a5a'
                }
            );
        }
    }

最重要的是,"数据"变量似乎存在错误,因为浏览器指出了显着的"未定义"。任何帮助,将不胜感激。谢谢!

如下注释问题所述,我只是将ajax函数放置在最终的ajax调用上方,然后将isloaded变量设置为在最后一个ajax呼叫中使用该方法的trui。p>

最新更新