繪製折線圖彎曲

Question

我想提請線圖使用形狀組件心電圖讀數。我想要圖像完全像這張圖片。

我完成90％的代碼。但是當我撥打clear()表示清除了所有行。
我想在兩種不同的閱讀之間給一些空間。
我的代碼：

<fx:Script> 
    <![CDATA[ 
     private var arrSPO2:Array = [33, 35, 36, 33, 28, 21,35, 36, 33, 28, 21, 13, 6,33, 28, 21, 13, 6, 0, 0, 0,28, 21, 13, 6, 0, 0, 0, 0, 0, 10,28, 21, 13, 6, 0, 0, 0, 0, 0, 10, 31, 56, 78,13, 6, 0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94,6, 0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55,0, 0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41,0, 0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44,0, 0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32,0, 0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7,0, 10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0,10, 31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0, 0, 2, 19,31, 56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0, 0, 0, 2, 19, 43, 68, 90,56, 78, 93, 98, 94, 82, 68, 55, 45, 41, 41, 42, 44, 43, 39, 32, 24, 15, 7, 1, 0]; 

     private var oldX:int = 0; 
     private var oldY:int = 0; 
     private var newX:int = 0; 
     private var newY:int = 0; 

     private static const TIMER_INTERVAL:int = 50; 
     private var timer:Timer = new Timer(TIMER_INTERVAL); 
     private var shapesSPO2:Shape = new Shape(); 
     [Bindable] private var index:int = -1; 

     protected function init():void { 
     } 

     private function timerHandler(event:TimerEvent):void { 
      trace(timer.currentCount); 

      index = timer.currentCount - 1; 

      //draw SPO2 
      newX += 2; 
      newY = ((arrSPO2[index] * -1)/2 + 120); 

      if (oldY == 0) { 
       oldY = newY; 
      } 

      shapesSPO2.graphics.moveTo(oldX, oldY); 
      shapesSPO2.graphics.lineTo(newX, newY); 

      ui1.addChild(shapesSPO2); 

      oldX = newX; 
      oldY = newY; 

      if (index > arrSPO2.length) { 
       shapesSPO2.graphics.clear(); 
       shapesSPO2.graphics.lineStyle(2, 0x990000, .75); 
       oldX = newX = 0; 

       timer.reset(); 
       timer.start(); 
      } 

     } 

     protected function btnSPO2_clickHandler(event:MouseEvent):void { 
      oldX = newX = 0; 
      shapesSPO2.graphics.lineStyle(2, 0x990000, .75); 

      timer.addEventListener(TimerEvent.TIMER, timerHandler); 

      timer.reset(); 
      timer.start(); 
     } 
    ]]> 
</fx:Script> 
<s:VGroup width="100%" height="100%" 
      horizontalAlign="center" verticalAlign="middle"> 
    <mx:HBox width="550" height="500" 
      borderColor="#000000" borderVisible="true" borderStyle="solid" borderAlpha="0.2" 
      visible="true" includeInLayout="true"> 
     <s:VGroup id="vgGraph" width="100%" height="100%" 
        horizontalAlign="center" 
        gap="10" 
        padding="10"> 
      <s:HGroup width="100%"> 
       <s:Label text="Current Index : {index}" fontSize="16" 
         fontWeight="bold" /> 
      </s:HGroup> 
      <mx:UIComponent id="ui1" width="100%" height="100%" /> 
      <!--<s:SpriteVisualElement id="spriteVis" width="100%" height="100%" />--> 

      <s:Button id="btnSPO2" label="Draw SPO2 Graph" click="btnSPO2_clickHandler(event)" /> 
     </s:VGroup> 
    </mx:HBox> 
</s:VGroup> 

Answer 1

要做到這一點，你可以改變你這樣的代碼：

private const margin:int = 10; 

private function timerHandler(event:TimerEvent):void { 

    if (index == arrSPO2.length - 1) { 

     // set the margin between the last chart and the new one 
     newX = newX + margin; 
     oldX = newX; 

     // reset index 
     index = 0; 

     timer.reset(); 
     timer.start(); 

     // exit if we have reached the last element of our array 
     return; 

    } 

    index = timer.currentCount - 1; 

    newX += 2; 
    newY = ((arrSPO2[index] * -1)/2 + 120);    

    if (oldY == 0) { 
     oldY = newY; 
    } 

    shapesSPO2.graphics.moveTo(oldX, oldY); 
    shapesSPO2.graphics.lineTo(newX, newY); 

    ui1.addChild(shapesSPO2); 

    oldX = newX; 
    oldY = newY;    

} 

，這將給你這樣的：

。希望可以幫助。

Answer 2

我已經修改了你的timerHandler如下：

private function timerHandler(event:TimerEvent):void { 
     trace(timer.currentCount); 

     index = timer.currentCount - 1; 

     if (index > arrSPO2.length) { 
      //shapesSPO2.graphics.clear(); 
      //shapesSPO2.graphics.lineStyle(2, 0x990000, .75); 
      newX += 10; 
      oldX = newX; 

      timer.reset(); 
      timer.start(); 

      return; 
     } 

     //draw SPO2 
     newX += 2; 

     if(newX > ui1.width) 
     { 
      oldX = newX = 0; 
     } 
     newY = ((arrSPO2[index] * -1)/2 + 120); 

     if (oldY == 0) { 
      oldY = newY; 
     } 
     if(index ==0) 
     { 
      oldY = newY; 
     } 

     shapesSPO2.graphics.moveTo(oldX, oldY); 
     shapesSPO2.graphics.lineTo(newX, newY); 

     ui1.addChild(shapesSPO2); 

     oldX = newX; 
     oldY = newY; 

    }