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*10000+minute*100+second;

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

   if (second < 10) {
      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遍历过多，应该在数据源数组中新加属性，直接判断在该定时器周期中中是否存在着数据的更新。