使用高清与JavaScript

时间:2017-09-27 20:47:06

标签: javascript jquery html django highcharts

我在Django中使用了Highchart

这是我对javascript对象的温度值。

[42,42,42,42,42,42,42,42,25.9,26,26.1]

这是我在html中的div:

<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
               }]
           });
       });
});

在取消对系列数据进行注释后,可以打印图表。(#data: [8,7,5,6,4,2,3,1],

但是当它被data: temperature,

取代时

然后,一些错误来自以下代码:

setChart(temperature);

  

未捕获的ReferenceError:未在Object.success

中定义setChart      

着火jquery-3.2.1.js:3317

     

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

     

完成jquery-3.2.1.js:9272

     

在XMLHttpRequest。 jquery-3.2.1.js:9514

要打印出温度对象在ajax块处理,但无法在setChar()t函数中打印。

我怎样才能解决这个错误?

1 个答案:

答案 0 :(得分:0)

问题是setChart()函数位于与ajax调用不同的范围内。请查看下面的示例以更正演示。

例:
http://jsfiddle.net/e37qftg3/