Javascript 导致Highcharts错误的竞争条件#13
我有一些动态生成的选项卡。单击任一选项卡可同时加载多个图表（三个或四个），如饼图、柱图或折线图。我将此图表附加到动态生成的html div中。如果我必须单击一个选项卡并等待所有图表加载，那么所有这些都可以正常工作。当我一个接一个地单击选项卡，而不是等到所有图表都加载时，问题就出现了。我在highcharts.js文件中发现一个javascript错误，该文件记录了highcharts错误#13。据我所知，我正在进行适当的文档准备检查，然后将图表加载到divs中。有什么问题吗？是否存在争用情况，或者是由于我的代码异步运行导致问题？代码如下：Javascript 导致Highcharts错误的竞争条件#13,javascript,charts,highcharts,lazy-high-charts,Javascript,Charts,Highcharts,Lazy High Charts,我有一些动态生成的选项卡。单击任一选项卡可同时加载多个图表（三个或四个），如饼图、柱图或折线图。我将此图表附加到动态生成的html div中。如果我必须单击一个选项卡并等待所有图表加载，那么所有这些都可以正常工作。当我一个接一个地单击选项卡，而不是等到所有图表都加载时，问题就出现了。我在highcharts.js文件中发现一个javascript错误，该文件记录了highcharts错误#13。据我所知，我正在进行适当的文档准备检查，然后将图表加载到divs中。有什么问题吗？是否存在争用情况，或
//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];
}
var ColumnChart=（函数（）{
var实例化；
var图；
函数init（）{
返回{
“ResultMethodName”：“onResultHttpService”，
“消息”：“ColumnChartdemo”，
“构建”：函数（）{
var objServiceLayer=$SL.getInstance（）；
var param={}；
param[“QueryID”]=this.BaseViewRef.Variables.ViewProperties.InputParams；
objServiceLayer.executeMethod（“GetPodFilterData”，参数，“onResultHttpService”，this，this.BaseViewRef.Variables.ViewProperties）；
},
“BaseViewRef”：$BV.getInstance（），
“onResultHttpService”：函数（结果、属性）{
var json_str=Sys.Serialization.JavaScriptSerializer.deserialize（结果）；
var数据=[]；
var cat=[]；
var categoryField=properties.PodAttributes.categoryField；
var valueField=properties.PodAttributes.valueField；
for（json_str中的变量i）{
var serie=新数组（json_str[i][categoryField]，json_str[i][valueField]）；
var tmpCat=新数组（json_str[i][categoryField]）；
数据推送（serie）；
猫推（tmpCat）；
}
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:properties.id，
类型：“列”
},
学分：{
已启用：false
},
标题：{
文本：“”
},
副标题:{
文本：“”
},
xAxis：{
类别：猫
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回this.value/properties.PodAttributes.divideBy
+properties.poddattributes.dataTipUnitLabel.split（'*'）[1].toUpperCase（）；
}
},
分:0,，
标题：{
文本：“”
}
},
图例：{
布局：“垂直”，
背景颜色：“#FFFFFF”，
对齐：“左”，
垂直排列：“顶部”，
x:100，
y:70，
浮动：是的，
影子：对
},
工具提示：{
格式化程序：函数（）{
返回“”+
this.x+'：'+''+properties.poddattributes.dataTipUnitLabel.split（'*'）[0]+
Highcharts.numberFormat（this.y/properties.PodAttributes.divideBy，properties.PodAttributes.dPoint）+
properties.poddattributes.dataTipUnitLabel.split（'*'）[1].toUpperCase（）；
}
},
打印选项：{
系列：{
allowPointSelect:true，
要点：{
事件：{单击：函数（）{
//警报（this.category+'：'+Highcharts.numberFormat（this.y/properties.PodAttributes.divideBy，properties.PodAttributes.dPoint）+
//properties.poddattributes.dataTipUnitLabel.split（'*'）[1].toUpperCase（））；
podsToRefresh=html5SpendDashboard.getInstance（）.getSavedPodObj（）；
var objBuildChart=html5SpendDashboard.getInstance（）；
对于（var p=0，pLen=podsToRefresh.length；p})（） 我在实时更新图表方面也遇到了类似的问题。为了避免这种情况，我在更新图表之前先检查容器是否存在 在您的情况下，您可以这样做以确保容器存在：
if($("#" + properties.id).length == 1) {
chart = new Highcharts.Chart({
//code
});
}
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();
}
};
if($("#" + properties.id).length == 1) {
chart = new Highcharts.Chart({
//code
});
}