绘制实时数据并使用flot api打开和关闭数据系列

Question

我正在使用flot图表。我想绘制每秒更新的图表，并且还想添加关闭和打开数据系列的功能。 我能够使它工作，但有我没有想到的问题，如一个系列的颜色在其他系列关闭时发生改变;另一种是当我更新数据系列的阵列图表似乎移动，但它从右边删除元素，在新的值在右侧绘制的同时...

var d1 = [] ; 
    var d2 = [] ; 
    var d3 = [] ; 


$(function(){ 



    {%for reading in readings%} 
      var time_stamp = parseFloat({{reading['timestamp']}} + 19800.00) * 1000 
      var A = parseFloat({{reading['values']['A']}}) ; 
      var V = parseFloat({{reading['values']['VLN']}}) - 50 ; 
      var W = parseFloat({{reading['values']['W']}})/1000 ; 

      d1.push([time_stamp,A]); 
      d2.push([time_stamp,V]); 
      d3.push([time_stamp,W]); 
    {%endfor%} 

    var datasets = { 
       "current":{ 
         label : "A", 
         data : d1 
       }, 
       "voltage":{ 
        label : "V", 
        data : d2 
       }, 
       "power":{ 
        label : "W", 
        data : d3 
       }, 


    } 


    var i = 0; 
     $.each(datasets, function(key, val) { 
      val.color = i; 
      ++i; 
    }); 



    // insert checkboxes 
    var choiceContainer = $("#choices"); 
    $.each(datasets, function(key, val) { 
     choiceContainer.append("<br/><input type='checkbox' name='" + key + 
      "' checked='checked' id='id" + key + "'></input>" + 
      "<label for='id" + key + "'>" 
      + val.label + "</label>"); 
    }); 


    choiceContainer.find("input").click(plotAccordingToChoices); 

    function plotAccordingToChoices() { 


      var data = []; 

      choiceContainer.find("input:checked").each(function() { 
       var key = $(this).attr("name"); 
       if (key && datasets[key]) { 

        data.push(datasets[key]); 
       } 
      }); 

      if (data.length > 0) { 
       $.plot("#placeholder", data, { 
        series: { 
         shadowSize: 0, 
         lines: { 
          show: true 
         }, 

        }, 
        yaxis: { 
         min: 0 
        }, 
        xaxis: { 
         tickDecimals: 0, 
         mode:"time" 
        } 
       }); 
      } 


      setTimeout(getNextDataset,1000); 

     } 



     plotAccordingToChoices(); 

}); 

function getNextDataset() 
     { 

      $.ajax({url : '/newdata' , success:function(result){ 
        reading =JSON.parse(result); 
        var time_stamp = (parseFloat(reading.timestamp) + 19800.00) * 1000 
        var A = parseFloat(reading.values.A) ; 
        var W = parseFloat(reading.values.W)/1000 ; 
        var V = parseFloat(reading.values.VLN) - 50 ; 

        d1.shift();d2.shift();d3.shift(); 

        d1.push([time_stamp,A]); 
        d2.push([time_stamp,V]); 
        d3.push([time_stamp,W]); 


        var datasets = { 
           "current":{ 
             label : "A", 
             data : d1 
           }, 
           "voltage":{ 
            label : "V", 
            data : d2 
           }, 
           "power":{ 
            label : "W", 
            data : d3 
           }, 
        } 


        var data = [] ; 
        var choiceContainer = $("#choices"); 
        choiceContainer.find("input:checked").each(function() { 
         var key = $(this).attr("name"); 
         if (key && datasets[key]) { 

          data.push(datasets[key]); 
         } 
        }); 


        if (data.length > 0) { 

         $.plot("#placeholder", data, { 
          series: { 
           shadowSize: 0, 
           lines: { 
            show: true 
           }, 
           points:{ 
            show:false 
           }, 

          }, 
          yaxis: { 
           min: 0 
          }, 
          xaxis: { 
           tickDecimals: 0, 
           mode:"time" 
          } 
         }); 
        } 

       } 
      }); 

      setTimeout(getNextDataset,1000) ; 
     } 

`

我正在使用flot图表中的代码示例。我在哪里出错？ 谢谢？

Answer 1

问题1：颜色更新每一个复选框被选中的时间或取消选中
原因：每次复选框，单击事件被触发，一些如何使用的颜色得到更新
解决方案：删除的setTimeout（getNextDataset，1000）;的数据元从右侧取出，而不是左：从功能plotAccordingToChoices（）

---

问题2调用。
原因:(非常愚蠢）数据是按降序排列的，我只是按照这个顺序推送数据。所以最新的点在数组的位置0，最老的点在位置n-1。我正在移除（ n-1）点。
解决方法：用unshift（）取代开头的推，是不是神奇：P