RN多資料解耦解決方案---react-native折線圖---react-native項目整理

出現問題：

        在react-native-charts-wrapper的折線圖在展現動态資料會出現一定的問題：

        1、多資料源在中圖表展現的時候，若資料源中點個數不同難以達到平衡

        2、在多資料源的情況下，如果每一個資料源使用與其相對應x軸資料的話或者多個資料源使用其中一個資料源的x軸資料，都會造成rn圖表中資料的不客觀，資料不真實。

        目前情況下，我們的圖表資料源為多個，且各個資料的傳回時間不同，可以了解為多個定時器，定時器中不斷産生圖表的資料，且各個定時器的時間周期不同，故各個資料無法在圖表中同步。

資料源資料更新的格式：

let minute = new Date().getMinutes();
let second = new Date().getSeconds();
let hour = new Date().getHours();
let xData1 = hour*+minute*+second;

   if (minute < ) {
      minute = '0' + minute;
      }

   if (second < ) {
      second = '0' + second;
      }

   var xtime = hour+ ':' + minute + ':' + second;

   var ytime = value.time;
                
this.state.urlDatafirst.push({
                  xTime_format:xtime,
                  xTimeall:xData1,
                  xData:xtime,
                  yData:ytime
                })
                
           

urlDatafirst就是圖表其中一個資料源。

解耦目的：

        解決rn中圖表的資料快慢更新問題。

解耦方案：

        1、讓圖表的更新與資料源本身的更新分割開來

        2、對于每一個圖表自更新周期，如果在這段時間中某資料源存在更新的數值，那麼就展現出這個資料源在這個自更新周期中更新出來的資料，若無更新，則給圖表y資料中傳遞NULL。

實作代碼：

let minuteall = new Date().getMinutes();
        let secondall = new Date().getSeconds();
        let hourall = new Date().getHours();
        let xData = hourall*10000+minuteall*100+secondall;
        if (minuteall < 10) {
          minuteall = '0' + minuteall;
        }
        if (secondall < 10) {
          secondall = '0' + secondall;
        }
        let xtimeall = hourall+':' + minuteall + ':' + secondall;

        this.setState({
          urlDatafirst: [],
          urlDatasecond: [],
          urlDatathrid: [],
          urlDatafour: [],
          urlDatafive: []
        }); // 設定發送請求時不能設定請求時長

        console.log("xData :"+xData);
        console.log("xtimeall :"+xtimeall);
        setInterval(()=>{
          // console.log("values1:"+this.state.values);
          // console.log("chartLabels:"+this.state.chartLabels);
          // console.log("values2:"+this.state.values2);
          // console.log("chartLabels2:"+this.state.chartLabels2);
          this.setState({
            chartLabels: this.state.chartLabels.concat([xtimeall]),
          })
          let flag1=false;
          let flag2=false;
          let flag3=false;
          let flag4=false;
          let flag5=false;

          for(let i=0;i<this.state.urlDatafirst.length;i++){
            let Data=this.state.urlDatafirst[i].xTimeall;
            let yData1=this.state.urlDatafirst[i].yData;
            let xDataformat=this.state.urlDatafirst[i].xTime_format;
            if(Data>=xData&&Data<xData+1){
              
              this.setState({
                  values: this.state.values.concat([yData1]),
              })
              flag1=true;
            }
            
        }
        
          for(let i=0;i<this.state.urlDatasecond.length;i++){
            let Data2=this.state.urlDatasecond[i].xTimeall;
            let yData2=this.state.urlDatasecond[i].yData;
            if(Data2>=xData&&Data2<xData+1){

              this.setState({
                  values2: this.state.values2.concat([yData2]),
              })
              flag2=true;
            }
          }

          for(let i=0;i<this.state.urlDatathrid.length;i++){
            let Data3=this.state.urlDatathrid[i].xTimeall;
            let yData3=this.state.urlDatathrid[i].yData;
            if(Data3>=xData&&Data3<xData+1){
              this.setState({
                  values3: this.state.values3.concat([yData3]),
              })
              flag3=true;
            }
          }

          for(let i=0;i<this.state.urlDatafour.length;i++){
            let Data4=this.state.urlDatafour[i].xTimeall;
            let yData4=this.state.urlDatafour[i].yData;
            if(Data4>=xData&&Data4<xData+1){
              this.setState({
                  values4: this.state.values4.concat([yData4]),
              })
              flag4=true;
            }
          }

          for(let i=0;i<this.state.urlDatafive.length;i++){
            let Data5=this.state.urlDatafive[i].xTimeall;
            let yData5=this.state.urlDatafive[i].yData;
            if(Data5>=xData&&Data5<xData+1){
              this.setState({
                  values5: this.state.values5.concat([yData5]),
              })
              flag5=true;
            }
          }
        if(flag1==false){
            this.setState({
              values: this.state.values.concat(null)
          
          })
        }
        if(flag2==false){
          this.setState({
            values2: this.state.values2.concat(null)
        
        })
      }
      if(flag3==false){
        this.setState({
          values3: this.state.values3.concat(null)
      
      })
    }
    if(flag4==false){
      this.setState({
        values4: this.state.values4.concat(null)
    
    })
  }
  if(flag5==false){
    this.setState({
      values5: this.state.values5.concat(null)
  
  })
}
        let minuteall1 = new Date().getMinutes();
        let secondall1 = new Date().getSeconds();
        let hourall1 = new Date().getHours();
        xData = hourall1*10000+minuteall1*100+secondall1;
        if (minuteall1 < 10) {
          minuteall1 = '0' + minuteall1;
        }
        if (secondall1 < 10) {
          secondall1 = '0' + secondall1;
        }
        xtimeall = hourall1+':' + minuteall1 + ':' + secondall1;
          console.log("後兩位："+xtimeall.charAt(xtimeall.length-1)+'+'+xtimeall);
        
        },1000);
           

代碼解釋：

1、urlDatafirst: [],urlDatasecond: [],urlDatathrid: [],urlDatafour: [],urlDatafive: []是該圖表的五個資料源，每個資料源都會有類似定時器的東西将新資料連接配接到資料源數組。

2、這個圖表自更新的定時器我定義的是1s運作一次。

3、在定時器中有五個flag，這個是來判斷在每個定時器周期中是否相對應的資料源有資料更新，若有則flag會被指派為true，若沒有運作，則會向該資料源數組中連接配接NULL以跳過該資料點的表示。

4、values到values5是對應着五個資料源的y軸資料，chartLabel是圖表控制更新的x軸資料。

5、在這段代碼中的x軸資料是時間，而且是有模式的時間，是一個字元串，是以在這裡我沒有直接有Data資料++，而是在這個定時器周期結束之前，擷取時間來作為下一個定時器周期的x軸資料，不過這樣可能會導緻在資料源中資料過多的情況下，使得最後擷取的時間并不是以1s為間隔，可能出現x軸資料以2s為間隔的情況，這是一個改進方向

6、第二個改進方向是，for周遊過多，應該在資料源數組中新加屬性，直接判斷在該定時器周期中中是否存在着資料的更新。