在 adobe flex 中使用形状绘制折线图

Question

我想使用 Shapes 组件绘制心电图读数的折线图。我想要与这张图片完全一样的图表。

我完成了 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;

    }