Javascript 在一个页面上处理两个ajax调用，将数据拉入另一个页面的Highcharts

我正在尝试用不同的数据加载两个Highchart。一个处理来自一个URL的一组数据，另一个处理另一个。到目前为止，我只加载了一个图表，这是一个相当大的问题。我不确定我是否做得正确，因为我读到在一个页面上有两个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'
                }
            );
        }
    }

公共数据：knockoutobserarray=ko.observatarray（）；
公共意外数据：knockoutobserarray=ko.observearray（）；
publicPlotDataLabels:knockoutObservalArray=ko.ObservalArray（）；
公共绘图数据：knockoutobserarray=ko.observearray（）；
公共isLoading:KnockoutObservable=ko.observable（false）；
public isload:KnockoutObservable=ko.observable（false）；
公共加载错误：KnockoutObservable=ko.observable（false）；
公共负荷：（月数、年数）=>作废；
公共setPlotData:（数据：任意）=>void；
公共init（我自己：MainDashboard）{}；
public incidentPlotData:KnockoutObservableArray=ko.observableArray（）；
公共incidentSetPlotData：（incidentData:any）=>无效；
公开参与阅读：KnockoutObservable=ko.observable（false）；
公众参与度：击倒可观察=可观察（假）；
构造函数（）{
var self=这个；
//调用允许正确继承的init函数。
if（$.isFunction（self.init））{
self.init（self）；
}
self.load=（月：号，年：号）=>{
自卸载（真）；
自加载（假）；
自承书（真实）；
自证明（假）；
$.ajax({
xhrFields:{withCredentials:true}，
url:areaUrl+“api/Change/SixMonthChangeCount”，
成功：数据=>{
自卸载（假）；
自我数据（数据）；
self.setPlotData（数据）；
self.isLoaded（true）；
},
错误：数据=>{
自加载错误（真）；
}
});
$.ajax({
xhrFields:{withCredentials:true}，
url:areaUrl+“api/Incident/IncidentCount”，
成功：意外数据=>{
自承书（假）；
自身数据（意外数据）；
self.setPlotData（意外数据）；
自证明（真实）；
},
错误：incidentData=>{
自加载错误（真）；
}
});
}
self.setPlotData=（数据：任意）=>{
self.plotData.push(
{
名称：'重要'，
数据：[data.List[5]。重要，data.List[4]。重要，data.List[3]。重要，data.List[2]。重要，data.List[1]。重要，data.List[0]。重要]，
颜色：“#fea156”
},
{
名称：'正常'，
数据：[数据.列表[5].正常，数据.列表[4].正常，数据.列表[3].正常，数据.列表[2].正常，数据.列表[1].正常，数据.列表[0].正常]，
颜色：“#b191c3”
},
{
姓名：'未成年人'，
数据：[data.List[5]。Minor，data.List[4]。Minor，data.List[3]。Minor，data.List[2]。Minor，data.List[1]。Minor，data.List[0]。Minor]，
颜色：“#83bfd1”
},
{
名称：“标准”，
数据：[data.List[5]。标准，数据。列表[4]。标准，数据。列表[3]。标准，数据。列表[2]。标准，数据。列表[1]。标准，数据。列表[0]。标准]，
颜色：“#72e76d”
},
{
姓名：'紧急'，
数据：[data.List[5]。紧急，data.List[4]。紧急，data.List[3]。紧急，data.List[2]。紧急，data.List[1]。紧急，data.List[0]。紧急]，
颜色：“#fa5a5a”
}
);
}
self.incidentSetPlotData=（incidentData:any）=>{
self.incidentPlotData.push(
{
名称：'高'，
数据：[incidentData.List[0]。高，incidentData.List[1]。高，incidentData.List[2]。高]，
颜色：“#fea156”
},
{
名称：'关键'，
数据：[incidentData.List[0]。严重，incidentData.List[1]。严重，incidentData.List[2]。高]，
颜色：“#fa5a5a”
}
);
}
}

---

除此之外，“data”变量似乎存在错误，因为浏览器注意到重要值为“undefined”。任何帮助都将不胜感激。谢谢

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

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

您没有包含函数创建图表-您发布的代码不足以解决问题。一张图表中有两个系列，还是两张图表？如果是两个系列-在创建图表之前，等待加载所有数据。如果有两个图表-请确保在加载每个图表的数据后创建每个图表。我道歉。是的，这是两个系列。我昨晚读了你的评论，并重新安排了加载子句，以便将所有数据都拉入。谢谢您没有包括函数创建图表-您发布的代码不足以解决问题。一个si中有两个系列