javascript - 在单个页面上处理两个 ajax 调用以将数据拉入另一个页面上的 Highcharts

Question

我正在尝试获取两个 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'
                }
            );
        }
    }

除此之外，“data”变量似乎存在错误，因为浏览器指出 Significant 为“未定义”。任何帮助，将不胜感激。谢谢!

Answer 1

正如OP问题下面的评论中提到的，我只是将AJAX函数放在最终的AJAX调用之上，并在该方法的最后一个AJAX调用中将isLoaded变量设置为true。