我正在尝试获取两个 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 为“未定义”。任何帮助,将不胜感激。谢谢!
最佳答案
正如OP问题下面的评论中提到的,我只是将AJAX函数放在最终的AJAX调用之上,并在该方法的最后一个AJAX调用中将isLoaded变量设置为true。
关于javascript - 在单个页面上处理两个 ajax 调用以将数据拉入另一个页面上的 Highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38000378/