Mit Highchart mit Javascript

Question

Ich benutzte Highchart mit Django

Hier ist mein Wert der Temperatur eines Javascript-Objekts.

[42, 42, 42, 42, 42, 42, 42, 42, 25,9, 26, 26,1]

Hier ist meine div in html:

<div id="container2" style="width:100%; height:400px;"></div>

chart.js

 $(document).ready(function(){ 
     var endpoint = '/api/chart/data'; 
     var temperature = []; 
     var humidity = []; 
     var uv = []; 
     var light = []; 
     var rainfall = []; 
     var labels = []; 
     $.ajax({ 
      method: "GET", 
      url: endpoint, 
      success: function(data){ 
       labels = data.labels; 
       temperature = data.temperature; 
       console.log(temperature); 
       setChart(temperature); 
      }, 
      error: function(error_data){ 
       console.log("error"); 
       console.log(error_data); 
      } 
    }); 


     $(function setChart(temperature){ 
     console.log(temperature); 
      Highcharts.setOptions({ 
       title: { 
        text: '過去24小時氣溫變化圖' 
       }, 
       chart: { 

        backgroundColor: { 
         linearGradient: [0, 0, 500, 500], 
         stops: [ 
          [0, 'rgb(255, 255, 255)'], 
          [1, 'rgb(240, 240, 255)'] 
          ] 
        }, 
        borderWidth: 2, 
        plotBackgroundColor: 'rgba(255, 255, 255, .9)', 
        plotShadow: true, 
        plotBorderWidth: 1 
       } 
      }); 

      var chart2 = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container2', 
        type: 'column' 
       }, 

       xAxis: { 
        type: 'datetime' 
       }, 

       series: [{ 
        data: temperature, 
        #data: [8,7,5,6,4,2,3,1], 
        pointStart: Date.UTC(2010, 0, 1), 
        pointInterval: 3600 * 1000 // one hour 
       }] 
      }); 
     }); 
}); 

Das Diagramm kann, wenn die Daten in Serie unkommentiert gedruckt werden. (#data: [8,7,5,6,4,2,3,1],

Aber wenn es von data: temperature,

Dann wird die einige Fehler kommen aus den folgenden Codes ersetzt:

setChart(temperature);

Uncaught ReferenceError: setChart is not defined at Object.success

at fire jquery-3.2.1.js:3317

at Object.fireWith [as resolveWith] jquery-3.2.1.js:3447

at done jquery-3.2.1.js:9272

at XMLHttpRequest. jquery-3.2.1.js:9514

Zum Ausdrucken wurde die Temperatur Objekt bei Ajax Block gearbeitet, aber in der drucken ist fehlgeschlagen setChar() t Funktion.

Wie kann ich diesen Fehler beheben?

Answer 1

Das Problem ist, dass die setChart()-Funktion in dem anderen Bereich als der Ajax-Aufruf befindet. Sehen Sie sich das Beispiel unten für die korrigierte Demo an.

Beispiel:
http://jsfiddle.net/e37qftg3/