實時海軍報圖不是JSON

Question

工作我使用這裏給出該實時圖表：http://www.flotcharts.org/flot/examples/realtime/index.html

我試圖從JSON文件輸入的值替換隨機數學生成代碼。它繪製一張空白圖。由於它在邏輯上看起來正確，因此無法找出問題。請幫忙。

這裏的scriplet：

<script type="text/javascript"> 

$(function() { 

var check; 
    // We use an inline data source in the example, usually data would 
    // be fetched from a server 

    var dat = []; 
     //totalPoints = 300; 

    function getRandomData() { 
     //alert("fff"); 
     if (dat.length > 0) 
      dat = dat.slice(1); 

     // Do a random walk 

     //while (dat.length < totalPoints) { 

      //var prev = dat.length > 0 ? dat[dat.length - 1] : 50, 
      // y = prev + Math.random() * 10 - 5; 

      //if (y < 0) { 
      // y = 0; 
      //} else if (y > 100) { 
      // y = 100; 
      //} 

      //dat.push(y); 

     $.getJSON('data_3.json', function(data) { 
     alert(data+"i m here"); 
       for (var i in data.nums) { 
        output = data.nums[i]; 
        dat.push(output); 
        } 
     }); 

     // Zip the generated y values with the x values 

     var res = []; 
     for (var i = 0; i < dat.length; ++i) { 
      res.push([i, dat[i]]); 

     } 

     return res; 

    } 

    // Set up the control widget 

    var updateInterval = 30; 
    $("#updateInterval").val(updateInterval).change(function() { 
     var v = $(this).val(); 
     if (v && !isNaN(+v)) { 
      updateInterval = +v; 
      if (updateInterval < 1) { 
       updateInterval = 1; 
      } else if (updateInterval > 2000) { 
       updateInterval = 2000; 
      } 
      $(this).val("" + updateInterval); 
     } 
    }); 

    var plot = $.plot("#placeholder", [ getRandomData() ], { 
     series: { 
      shadowSize: 0 // Drawing is faster without shadows 
     }, 
     yaxis: { 
      min: 0, 
      max: 100 
     }, 
     xaxis: { 
      show: false 
     } 
    }); 

    function update() { 

     plot.setData([getRandomData()]); 

     // Since the axes don't change, we don't need to call plot.setupGrid() 

     plot.draw(); 
     setTimeout(update, updateInterval); 
    } 

    update(); 

    // Add the Flot version string to the footer 

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; "); 
}); 

</script> 

這是JSON數據，data_3.json：

{ 
"label": "FLOT", 
"nums":[ 
    0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258, 
    0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269, 
    0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269, 
    0.8269, 0.8258, 0.8247, 0.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357, 
    0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384, 
    0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422, 
    0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84, 
    0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215, 
    0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282, 
    0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273, 
    0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097, 
    0.8101, 0.8119, 0.8107, 0.8105, 0.8084, 0.8069, 0.8047, 0.8023, 0.7965, 0.7919, 
    0.7921, 0.7922, 0.7934, 0.7918, 0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867, 
    0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816, 
    0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845 
] } 

Answer 1

我相信問題是你得到的數據不同步，但繼續你的代碼，如果數據已經在那裏。

當你進入getRandomData，你刪除（幾乎）所有的點。然後，您將與$.getJSON異步獲取新數據。您嘗試填寫res，但您的$.getJSON的結果可能還沒有。

當您填寫res進行檢查時插入斷點/調試器。

儘量不要清空你的dat變量通過刪除此代碼

if (dat.length > 0) 
    dat = dat.slice(1);