“Uncaught ReferenceError: graphique n'est pas défini”

tous,

Je travaille avec la suite de HTML/Javascript code:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- google fonts from CDN -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<!-- highcharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<style>
html, body {
width: 95%;
margin: auto;
font-family: 'Open Sans',sans-serif;
}
#chart_container {
width:100%;
height:500px;
}
</style>
</head>
<body>
<h1>Live Data</h1>
<div id="chart_container">
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: getBirds
}
},
title: {
text: 'DRHW Live Data Stream'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: 'Count Observed'
}
},
series: [
],
legend: {
layout: 'horiztonal',
align: 'center'
}
});
function getBirds() {
var now = new Date();
var et = now.getTime() / 1000; //PHP TS
var st = et - 10; //30 seconds prior in PHP
console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}
$.getJSON("https://path/to/json&callback=?", function(result) {
var data = result.data;if (data.length == 0) {
return;
} else {
additions = new Array();
for (i=0;i<data.length;i++) {
if (data[i].qstype != "1") {
species = data[i].answers[0]['answer'];
scode = species.substring(0,species.search(" - ")).trim()
count = (data[i].answers[1]['answer'] * 1);
newdata = new Object();
newdata['name'] = species;
newdata['count'] = count;
additions.push(newdata);
}
}
//now, for each addition, you need to loop through the existing data structures, and see if the thing exists.  if it does, add the data; if not, add the thing, then add the data.
var existingdata = chart.series;
for (i=0;i<additions.length;i++) {
isnewpoint = true;
for (j=0;j<existingdata.length;j++) {
if (existingdata[j].name == additions[i].name) {
isnewpoint = false
count = additions[i].count;
point = [now.getTime(),count];
chart.series[j].addPoint(point, true, shift);
shift = false; //this way, only one shift occurs - the first time through adding a new point to an existing data set. this will control against future shifting, either from other datapoints having new points added, 
}
}
if (isnewpoint) {
newseries = new Object();
count = additions[i].count;
newseries['name'] = additions[i].name;
for (j=0;j<length;j++) {
newseries['data'].push(0);
}
newseries['data'].push(count);
chart.series.push(newseries);
}
}
//we have now looped through and added a new data point to all species where new data was created in this pull.  We still need to add a new point to those that were not affected.
existingdata = chart.series;
for (i=0;i<existingdata.length;i++) {
getname = existingdata[i].name;
getlength = existingdata[i].data.length;
if (getlength<length) { //which we established earlier as one MORE than existed previously, prior to the addition
point = [now.getTime(),0]
chart.series[i].addPoint(point, true, shift);
}
}
}
setTimeout(getBirds,10000);
});
}
});
</script>
</html>

Le problème que je vais avoir, c'est assez simple (mais me rend fou!), et dès le début du js bloc. Si je suis la définition de la variable "tableau" comme la nouvelle Highcharts graphique, et je me suis mise en "getBirds" comme la fonction de charge une fois que c'est chargé, le console.ligne de journal me dit que le tableau n'est pas défini, et la ligne en dessous, il renvoie une erreur (Uncaught TypeError: Cannot read property 'series' of undefined).

J'ai vérifié les éléments suivants:

  1. La Highcharts de référence (http://www.highcharts.com/docs/working-with-data/preprocessing-live-data), ce qui suggère une configuration similaire à la mienne;
  2. J'ai essayé de définir la chart variable sur sa propre ligne, qui, bien sûr définit graphique pour ma console.journal, mais ne définit pas la chart.series requis sur la ligne suivante);
  3. J'ai fait des recherches stackoverflow et d'autres documents pour la portée des variables, mais je pense que je suis le manipuler correctement basé sur mes recherches.
  4. J'ai essayé d'inverser l'ordre - mettre le getBirds() fonction au-dessus de la chart définition.

Je suis à une perte. Toute aide est grandement appréciée, merci d'avance!

Pourquoi avez-vous---> $(function() { $(document).ready(function() {
Oui, OP, $(function(){}) et $(document).ready(function(){}) sont la même chose.
Concernant votre question, si le chart.events.load gestionnaire est d'attendre jusqu'à ce que le DOM est prêt, alors pourquoi l'utiliser? Vous êtes déjà ce que (deux fois).
Je ne pense pas que j'avais besoin des deux, mais j'ai voulu suivre la syntaxe que j'ai vu ailleurs aussi exactement que possible. Je vais modifier et supprimer les $function() {} déclaration au top, pour plus de clarté.
Mon point est qu'il semble clair que le events.load gestionnaire de tir immédiatement, et de manière synchrone, ce qui signifie qu'il n'y a aucune chance pour que l'objet soit retourné à la chart variable avant que le gestionnaire d'incendies. Si c'est le cas, alors cela signifie que le diagramme est rendu immédiatement, et il n'y a pas besoin d'un gestionnaire d'événement. Si oui, l'OP doit il suffit d'exécuter le code directement après l' chart affectation. De cette façon chart sera instancié et pleinement utilisable.

OriginalL'auteur kcbaker | 2013-11-23

  1. 2

    La raison en est probablement que vous ne peut pas se référer à une variable lors de ses phases de déclaration. Je devine que la charge de la fonction est appelée, comme on l'a déclaré. Heureusement, vous pouvez vous référer à l'objet lors de la déclaration de la fonction. Essayez le bloc de code suivant.

    function getBirds(e) {
var now = new Date(),
et = now.getTime() / 1000, //PHP TS
st = et - 10, //30 seconds prior in PHP
chart = this;
if (chart.series.length > 0) {

    ...déclarant la chart variable dans le var bloc à l'intérieur.

    C'était vraiment utile, @pyius. La seule autre défi a été de se le délai d'attente à droite, mais le truc, il y a à faire setTimeout(function(){getBirds(e)},10000) à obtenir que pour tirer toutes les 10 secondes. Merci pour l'aperçu!

    OriginalL'auteur dustinnewbold

  2. 1

    Essayer exemples de highchart page, j'ai trouvé que la variable chart est disponible uniquement après $.json() ou $ajax() appel. Si vous essayez d'utiliser chart avant qu'il retourne undefined. Parce que c'est, et c'est seulement après $.json().

    Leurs exemples avec json et ajax sont mis de cette façon:

    var chart;
function requestData() {...}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
...
});

    J'ai fait de même avec votre exemple. De getBirds() j'ai commenté les lignes avant appel json:

            console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}

    et déplacés après l'appel json.

    Et modifié cette ligne:

                        //newdata['name'] = species;
newdata['name'] = scode;

    Et arrêtez-vous ici:

                        for (j=0;j<length;j++) {

    en raison de l'erreur:

    Uncaught TypeError: Cannot call method 'push' of undefined

    à la ligne

    newseries['data'].push(count);

    Il échoue car il n'y a pas de tableau. Espérons que cette aide.

    OriginalL'auteur Anto Jurković

  3. -1

    Vous devez vérifier deux solution :

    1. série variable de propriété ne devrait pas être vide
      peut-être que son ok pour entrer dans la série: null;

    2. remplacer votre script avec ce code et vérifier de nouveau :

    http://notepad.cc/share/3TwgCoEano

    <script type="text/javascript">
$(function() {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: getBirds
}
},
title: {
text: 'DRHW Live Data Stream'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: 'Count Observed'
}
},
series: null,
legend: {
layout: 'horiztonal',
align: 'center'
}
});
function getBirds() {
var now = new Date();
var et = now.getTime() / 1000; //PHP TS
var st = et - 10; //30 seconds prior in PHP
console.log(chart);
if (chart.series.length > 0) {
var series = chart.series[0];
var length = series.length + 1;
var shift = series.data.length > 20;
}
$.getJSON("https://path/to/json&callback=?", function(result) {
var data = result.data;if (data.length == 0) {
return;
} else {
additions = new Array();
for (i=0;i<data.length;i++) {
if (data[i].qstype != "1") {
species = data[i].answers[0]['answer'];
scode = species.substring(0,species.search(" - ")).trim()
count = (data[i].answers[1]['answer'] * 1);
newdata = new Object();
newdata['name'] = species;
newdata['count'] = count;
additions.push(newdata);
}
}
//now, for each addition, you need to loop through the existing data structures, and see if the thing exists.  if it does, add the data; if not, add the thing, then add the data.
var existingdata = chart.series;
for (i=0;i<additions.length;i++) {
isnewpoint = true;
for (j=0;j<existingdata.length;j++) {
if (existingdata[j].name == additions[i].name) {
isnewpoint = false
count = additions[i].count;
point = [now.getTime(),count];
chart.series[j].addPoint(point, true, shift);
shift = false; //this way, only one shift occurs - the first time through adding a new point to an existing data set. this will control against future shifting, either from other datapoints having new points added, 
}
}
if (isnewpoint) {
newseries = new Object();
count = additions[i].count;
newseries['name'] = additions[i].name;
for (j=0;j<length;j++) {
newseries['data'].push(0);
}
newseries['data'].push(count);
chart.series.push(newseries);
}
}
//we have now looped through and added a new data point to all species where new data was created in this pull.  We still need to add a new point to those that were not affected.
existingdata = chart.series;
for (i=0;i<existingdata.length;i++) {
getname = existingdata[i].name;
getlength = existingdata[i].data.length;
if (getlength<length) { //which we established earlier as one MORE than existed previously, prior to the addition
point = [now.getTime(),0]
chart.series[i].addPoint(point, true, shift);
}
}
}
setTimeout(getBirds,10000);
});
}
});
});
</script>
    Merci pour la réponse, Vahid. J'ai essayé votre code, ce qui elle ressemble juste remplace la série définition de la valeur null au lieu de tableau vide (laissez-moi savoir si j'ai raté quelque chose), mais pas de dés.
    Tu n'as eu une dernière erreur après avoir essayer?
    Oui, l'erreur est toujours présente.

    OriginalL'auteur Vahid Taghizadeh

  4. -1

    la déclaration de fonction est interprété avant le diagramme d'objet dans l'espace de noms global.

    Si vous modifiez la syntaxe d'un expression de fonction au lieu

    var getBirds=function() {
....
};

    il ne sera pas évaluée jusqu'à ce que vous l'appelez.

    Cependant, vous pourriez vouloir ajouter un graphique en tant que paramètre pour getBirds(), c'est un peu moins cher que d'obtenir une variable à partir de l'espace de noms global.

    MODIFIER

    Cela peut nécessiter un peu de débogage, mais il vaut la peine d'essayer

        var getBirds = function(chart) {
...
};
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_container',
defaultSeriesType: 'line',
events: {
load: function() { 
getBirds(this); 
}
}
}
...
});
setTimeout(getBirds,10000);
});
}
});

    Cela augmentera nouvelle erreur: ReferenceError: getBirds is not defined sur le script de la ligne 8. En gros, c'est la poule et de l'œuf problème.
    En fait il ne sera pas. La déclaration de la variable sera hissé, donc ça va être l'obtention de l'initialisation par défaut, qui est undefined. Je ne sais pas exactement ce que la propriété est pour, mais si c'est pour les DOM prêt, alors OP devrait simplement se débarrasser de la fonction, et d'exécuter le code immédiatement.
    vous pouvez déclarer getBirds avant de jQuery document prêt de l'événement, mais c'est une autre matther entièrement, et un commentaire hors de propos, par la manière.
    En effet, je viens de cheked et aucune erreur n'est affiché, mais vous ne pouvez toujours pas faire, chart.events.load sera undefined: jsbin.com/ABUnEhe/1/edit?js console
    Amenadiel, j'ai essayé votre méthode, et même si elle ne renvoie pas d'erreur plus, il ne semble pas exécuter la fonction. Puisque la fonction est appelée dans le tableau de events.load, si je change la syntaxe d'une expression de fonction, la fonction ne semble jamais être appelé.

    OriginalL'auteur amenadiel