导致Highcharts错误＃13的种族情况 [英] Race condition leading to Highcharts error #13
本文介绍了导致Highcharts错误＃13的种族情况的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些动态生成的选项卡。点击任何一个标签页会同时加载多个图表（三个或四个），例如饼图，列或线图。我将这些图表附加到动态生成的html div中。所有的作品都很好，如果我不得不点击一个标签并等待所有的图表加载。问题发生时，我继续点击标签一个接一个，而不是等到所有的图表加载。我在highcharts.js文件里面收到一个javascript错误，它记录了Highcharts错误＃13。据我所知，我正在做适当的文件准备检查，然后加载我的图表到div。什么似乎是问题？是否有竞争条件发生或由于我的代码异步运行导致问题？这里是代码：
//在tablick上调用的函数：
函数GetPod（podObj）{
savedPortletsObj = [];
var objtab = new Array（）;
var htmlMarkup ='';
$（'＃podHolder'）。empty（）;
for（v = 0，pCount = podObj.length; v
// 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 +'>; //图表被添加到这个div中
htmlMarkup = htmlMarkup +< / div>;
htmlMarkup = htmlMarkup +< / div>;
htmlMarkup = htmlMarkup +< / article>;
// htmlMarkup = htmlMarkup +< / div>;
$（htmlMarkup）.appendTo（$（'＃podHolder'））; //最后将图表div添加到父div
buildChart（podObj [v]）;
savedPortletsObj [v] = podObj [v];
}
//然后我打电话给buildChart
function buildChart（podObj）{
switch（podObj.PodAttributes.type）{
caseColumnChart：
// chartTypes [ podObj.id] = podObj.PodAttributes.type;
// requirejs（[HTML5SpendDashboard / includes / js / views / column.chart.js]，function（）{
var objChart = ColumnChart.getInstance（）;
onSuccessLoadChart（podObj ，objChart）;
//}）;
休息;
casedataGrid：
// chartTypes [podObj.id] = podObj.PodAttributes.type;
// requirejs（[HTML5SpendDashboard / includes / js / views / grid.js]，function（）{
var objChart = DataGrid.getInstance（）;
onSuccessLoadChart（podObj，objChart ）;
//}）;
break;
caselineChart：
// // chartTypes [podObj.id] = podObj.PodAttributes.type;
//requirejs([\"HTML5SpendDashboard/includes/js/views/line.chart.js]，function（）{
var objChart = LineChart.getInstance（）;
onSuccessLoadChart（podObj ，objChart）;
//}）;
休息;
casepieChart：
// chartTypes [podObj.id] = podObj.PodAttributes.type;
// requirejs（[HTML5SpendDashboard / includes / js / views / pie.chart.js]，function（）{
var objChart = PieChart.getInstance（）;
onSuccessLoadChart（podObj ，objChart）;
//}）;
休息;
}
}
函数onSuccessLoadChart（podObj，objChart）{
objChart.BaseViewRef.Variables.ViewProperties = podObj;
objChart.Build（）;
$ b // FInally在创建实例后调用Build它为例如：柱形图将（为每个图表创建了一个单独的js文件）
var ColumnChart =（function（ ）{
var实例化;
var chart;
函数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.JavaScriptSe rializer.deserialize（结果）;
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）;
$ b $（document）.ready（function（）{
chart = new Highcharts.Chart（{
chart：{
renderTo：properties .id，
type：'column'
}，
credits：{
enabled：false
}，
title：{
text ：''
}，
字幕：{
text：''
}，
xAxis：{
类别：cat
}，
yAxis：{
labels：{
formatter：function（）{
return this.value / properties.PodAttributes.divideBy
+ properties.PodAttributes.da taTipUnitLabel.split（ *）[1] .toUpperCase（）;
}
}，
分钟：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.numb erFormat（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
}
}
}
}
}，
列：{
pointPadding：0.2，
borderWidth：0
$ b $，
系列：[{
showInLegend：false，
data：data
}]
}）;
}）;
}
};
};
$ b $ return {
getInstance：function（）{
return instantiated = init（）;
}
};
}）（）;
解决方案我有一个实时更新图表的类似问题。我可以避免这种情况，在我更新图表之前首先检查以确保容器已存在。
在你的情况下，你可以做这样的事情来做确保容器存在：
if（$（＃+ properties.id）.length == 1）{
chart = new Highcharts.Chart（{
// code
}）;
}
I have some tabs which are generated dynamically. Clicking on any of this tabs loads multiple charts(three or four) like a pie, column or a linechart simultaneously. I append this charts into dynamically generated html divs. All works good if i had to click a tab and wait for all the charts to be loaded. Problem happens when i keep on clicking tabs one after the other and not wait till all the charts are loaded. i get a javascript error inside highcharts.js file which logs Highcharts error #13. As far as i know i am doing proper document ready checks and then loading my charts into the divs. What seems to be the problem ? Is there a race condition happening or due to my code running asynchronously leading to problems? Here is the code:
//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];
}
// Then i call 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();
}
// FInally Build is called after the instance was created for it , For eg: Column chart will be (Have created a separate js files for each chart)
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();
}
};
})();
解决方案 I had a similar issue with updating charts in real time. I was able to avoid this scenario by first checking to make sure that the container exists before I would update the chart.
In your case you could do something like this to make sure that the container exists:
if($("#" + properties.id).length == 1) {
chart = new Highcharts.Chart({
//code
});
}
这篇关于导致Highcharts错误＃13的种族情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
