2013-07-25 15 views
10

Penso che sia perché il mio globale var chart non è stato ancora impostato quando viene chiamata la mia funzione requestData.Highcharts.js non renderà il grafico, si dice errore "Impossibile leggere la proprietà 'serie' di undefined"

Questo è il mio codice di Highcharts all'interno di un $(document).ready(function()

 chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'spline', 
       marginRight: 130, 
       marginBottom: 25, 
       events: { 
       load: requestData() 
       } 
      }, 
      title: { 
       text: 'Reporte PMU', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150, 
       maxZoom : 20 * 1000, 
       title: { 
        text: 'tiempo' 
       }, 
       labels : { y : 0, rotation: -60 } 
      }, 
      yAxis: { 
       title: { 
        text: 'Amount' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y; 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 0 
      }, 
      series: [{ 
       name: 'serieTension', 
       data: [] 
      }] 
     });  
    }); 

e questo è il mio requestData()

 $.ajax({       
      url: 'data2.php', 
      success: function(point) { 
       var series =chart.series[0], 
       shift = series.data.length > 20; //shift if the series is longer than 20 

       //add point 
       chart.series[0].addPoint(point, true, shift); 

       setTimeout(requestData, 1000); 
      }, 
      cache : false 
     }); 
    } 

risposta

7

Basta posizionare

var chart; 

al di fuori di tutte le funzioni, accanto al tuo documento pronto gestore per renderlo globale.

EDIT:

Inoltre, aggiungere un riferimento all'interno della chiamata di carico

load: function() { 
    chart = this; // `this` is the reference to the chart 
    requestData(); 
} 
+0

Ho già un diagramma var come variabile globale fuori tutte le funcions – rrey

+0

eccellente, grazie. questo era il problema che non ho fatto riferimento al grafico – rrey

+0

In nessun'altra parte ho trovato questa intuizione per aggiungere un riferimento nella chiamata di caricamento. Questo ha finalmente fatto funzionare il mio grafico con i dati in tempo reale. – 0rkan