javascript - test - ¿Cómo puedo solucionar el error#13 de Highcharts?
propiedades de highcharts (4)
Utilizo Highchart para que el usuario pueda cerrar y abrir la página del gráfico y volver a dibujar el gráfico; en algunos casos, me puede dar este error. ¿Cómo puedo solucionarlo? Gracias. Aquí está mi código.
function populateGraph(graph1data1,graph1data2,id,time,bottomText,tickinterval){
$(function () {
$(''#''+id).highcharts({
chart: {
type: ''line''
},
xAxis: {
tickWidth: 0,
categories: [''1,2,3,4'']
},
yAxis: {
gridLineColor: ''#fff'',
title: {
text: ''''
},
labels: {
formatter: function() {
return '''';
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: ''This '',
data: [1,2,3,4],
color: ''#1e71ef''
}, {
name: ''Last '',
data: [5,6,7,8],
color:''#dfe0e1''
}]
});
});
}
}
function loadOnlineDashboardChannel(channel){
$.ajax({
type: "get",
dataType: ''html'',
data: {},
url: "/companies/2/online_dashboard_channel",
success: function(data, status){
var obj = JSON.parse(data);
var template_data = {
measures_list:
obj.measures
};
$(function() {
var tmplHTML_measures = ''{{#measures_list}} <div class="col-lg-11 col-lg-offset-1"><p class="indicator-title gray-bottom-border">{{name}}</br></p><div><p><span class="font30px">{{total}} </span> Total {{name}}<br><span class="green-text">{{increase}}%</span> from last <span class="metric_time"></span></p></div><div class="graph-header"><h3>{{this_interval}} </h3><p>New {{name}}</p><p class="percentage-graph green-text">{{percentag e}}%<p></div><div id={{graph_id}} class="graph"></div> </div>{{/measures_list}}'';
Handlebars.render = function(tmpl, data){data = data || {};return Handlebars.compile(tmpl)(data);};
$("#template").empty().append(Handlebars.render(tmplHTML_measures,template_data) );
var data_graph;
for ( var i = 0; i < obj.measures.length; i++ ) {
data_graph=obj.measures[i];
populateGraph(data_graph.this_interval_detail,data_graph.last_interval_detail,data_graph.graph_id,time,obj.bottom_graph_text,parseInt($(''#timeframe-select'').find(":selected").attr(''interval'')) );
}
})
},
error: function(error) {
}
});
return this;
};
Yo uso el manillar así que en esta parte en var tmplHTML_measures creo el div, en el para invoco la función para dibujar el gráfico.
Gracias, repito, algunas veces funciona perfectamente y algunas veces falla, dame el error # 13
Las categorías deben ser una colección, fue así:
categories: xaxis
Cambiarlo a esto:
categories: [''xaxis'']
Algunos de los campos de datos deben estar entre comillas simples como esta:
data: ''blue''
Aquí hay un violín sin ningún error para ti:
Buena suerte con el resto. :)
ps A veces me resulta más fácil editar un violín que funcione desde el sitio de Highcharts y adaptarlo a lo que necesita. Como éste:
Tuve el mismo problema y lo solucioné usando el contenedor correcto:
En mi caso, utilicé lo siguiente:
// Use Meteor.defer() to craete chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart(''Charts'', {
chart: {
renderTo: ''container'',
type: ''column'',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},....
}.....
}
Template.body.helpers({
createChart: function () {...}
y en el archivo HTML:
<div id=''Charts''>
{{createChart}}
</div>
Esta solución que encontré siguiendo el enlace: http://forum.highcharts.com/viewtopic.php?f=9&t=15610
Saludos.
Además, asegúrese de que "highcharts-more.js" esté declarado en su HTML.
<script src="https://code.highcharts.com/highcharts-more.js"></script>
Me enfrenté al mismo error y lo que llegué a saber es que el Error # 13 ocurre cuando HighCharts.js intenta acceder a un elemento que no está presente en el DOM.
¿Cómo lo arreglé? Me aseguré de que el método HightCharts se invoque solo después de que se cree mi elemento objetivo en el DOM. ¡¡¡¡Bingo!!!! Todo funcionó bien