我有一些动态生成的选项卡。单击任何此选项卡可同时加载多个图表（三个或四个），例如饼图、柱形图或折线图。我将此图表附加到动态生成的 html div 中。如果我必须单击一个选项卡并等待所有图表加载，一切都会很好。当我一个接一个地单击选项卡而不是等到所有图表都加载完毕时，就会出现问题。我在 highcharts.js 文件中收到一个 javascript 错误，该文件记录 Highcharts 错误 #13。据我所知，我正在做适当的文档准备检查，然后将我的图表加载到 div 中。似乎是什么问题？是否存在竞争情况或由于我的代码异步运行导致问题？这是代码：
//Function called on tablick:
function GetPod(podObj) {
savedPortletsObj = [];
var objtab = new Array();
var htmlMarkup = '';
$('#podHolder').empty();
for (v = 0, pCount = podObj.length; v < pCount; v++) {
htmlMarkup = "";
// htmlMarkup = htmlMarkup + " <div class='table-cell'>";
htmlMarkup = htmlMarkup + " <article class='db-box bigFont' id='" + podObj[v].id + "_art' style='height: 100%;'>";
htmlMarkup = htmlMarkup + " <div class='box-head' ><span> <strong>" + podObj[v].title.toString() + "</strong></span></div>";
htmlMarkup = htmlMarkup + " <div class='dashboard-container'>";
htmlMarkup = htmlMarkup + " <div class='tableContentDiv height250 fadeInBox' id='" + podObj[v].id + "'> "; // Charts are appended into this div
htmlMarkup = htmlMarkup + " </div>";
htmlMarkup = htmlMarkup + " </div>";
htmlMarkup = htmlMarkup + " </article>";
// htmlMarkup = htmlMarkup + " </div>";
$(htmlMarkup).appendTo($('#podHolder')); // Finally appending the chart div to the parent div
buildChart(podObj[v]);
savedPortletsObj[v] = podObj[v];
}
// 然后我调用 buildChart
function buildChart(podObj) {
switch (podObj.PodAttributes.type) {
case "ColumnChart":
// chartTypes[podObj.id] = podObj.PodAttributes.type;
// requirejs(["HTML5SpendDashboard/includes/js/views/column.chart.js"], function () {
var objChart = ColumnChart.getInstance();
onSuccessLoadChart(podObj, objChart);
// });
break;
case "dataGrid":
// chartTypes[podObj.id] = podObj.PodAttributes.type;
// requirejs(["HTML5SpendDashboard/includes/js/views/grid.js"], function () {
var objChart = DataGrid.getInstance();
onSuccessLoadChart(podObj, objChart);
// });
break;
case "lineChart":
// // chartTypes[podObj.id] = podObj.PodAttributes.type;
//requirejs(["HTML5SpendDashboard/includes/js/views/line.chart.js"], function () {
var objChart = LineChart.getInstance();
onSuccessLoadChart(podObj, objChart);
// });
break;
case "pieChart":
// chartTypes[podObj.id] = podObj.PodAttributes.type;
// requirejs(["HTML5SpendDashboard/includes/js/views/pie.chart.js"], function () {
var objChart = PieChart.getInstance();
onSuccessLoadChart(podObj, objChart);
// });
break;
}
}
function onSuccessLoadChart(podObj, objChart) {
objChart.BaseViewRef.Variables.ViewProperties = podObj;
objChart.Build();
}
// 最后在为其创建实例后调用Build，例如：柱形图将是（为每个图表创建了单独的js文件）
var ColumnChart = (function () {
var instantiated;
var chart;
function init() {
return {
"ResultMethodName": "onResultHttpService",
"Message": "ColumnChartdemo",
"Build": function () {
var objServiceLayer = $SL.getInstance();
var param = {};
param["QueryID"] = this.BaseViewRef.Variables.ViewProperties.InputParams;
objServiceLayer.executeMethod("GetPodFilterData", param, "onResultHttpService", this, this.BaseViewRef.Variables.ViewProperties);
},
"BaseViewRef": $BV.getInstance(),
"onResultHttpService": function (result, properties) {
var json_str = Sys.Serialization.JavaScriptSerializer.deserialize(result);
var data = [];
var cat = [];
var categoryField = properties.PodAttributes.categoryField;
var valueField = properties.PodAttributes.valueField;
for (var i in json_str) {
var serie = new Array(json_str[i][categoryField], json_str[i][valueField]);
var tmpCat = new Array(json_str[i][categoryField]);
data.push(serie);
cat.push(tmpCat);
}
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: properties.id,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: cat
},
yAxis: {
labels: {
formatter: function () {
return this.value / properties.PodAttributes.divideBy
+ properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase();
}
},
min: 0,
title: {
text: ''
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ':' + '</br>' + properties.PodAttributes.dataTipUnitLabel.split('*')[0] +
Highcharts.numberFormat(this.y / properties.PodAttributes.divideBy, properties.PodAttributes.dPoint) +
properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase();
}
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: { click: function () {
// alert(this.category + ' : ' + Highcharts.numberFormat(this.y / properties.PodAttributes.divideBy, properties.PodAttributes.dPoint) +
// properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase());
podsToRefresh = html5SpendDashboard.getInstance().getSavedPodObj();
var objBuildChart = html5SpendDashboard.getInstance();
for (var p = 0, pLen = podsToRefresh.length; p < pLen; p++) {
objBuildChart.buildChart(podsToRefresh[p]);
}
}
}
}
},
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false,
data: data
}]
});
});
}
};
};
return {
getInstance: function () {
return instantiated = init();
}
};
})();