Flex/AS Компонент

Question

Привет я хочу, чтобы сделать компонент, чтобы сделать график, как это:

Однако площадь под графиком должна быть заполнена красным цветом. У меня есть два разных типа значений, которые я использую для значения x. Я хочу использовать время, а на y я хочу использовать денежную ценность как ints, но как мне начать? Моя идея на старте заключалась в том, чтобы нарисовать Sprites с Vector, но это не работает, потому что он запускает верхнюю левую регулярную нулевую точку, и я не могу заполнить всю область под графиком.

package 
{ 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.geom.Point; 


    [SWF(backgroundColor="0xFFFFFF" , width="500" , height="500")] 
    public class Highprofil extends Sprite 
    { 
     public function Highprofil() 
     { 
      var drawSprite:Sprite = new Sprite(); 
     var localPoint:Point = drawSprite.localToGlobal(new Point(0,999)); 
     var money:Array = new Array(1,2,10,20,10,2,1); 
     var time:Array = new Array(12,58,52,41,66,98,3); 
     var geo:Shape=new Shape(); 
     var testdata:Vector.<Number>=new Vector.<Number>; 
     for(var i:int=0;i<money.length;i++){ 
     testdata.push(money[i]); 
     testdata.push(time[i]); 
      } 

     var commands:Vector.<int> = new Vector.<int>(); 
     for(var j:int=0;j<money.length;j++){ 
      commands.push(j); 

     } 



     drawSprite.graphics.beginFill(0xFFFF0000); // Color Red 

     drawSprite.graphics.drawPath(commands, testdata); // Draw the path 
     drawSprite.graphics.endFill(); 

     addChild(drawSprite); 
     } 
    } 
} 

Это будет UIComponent не знаю, если его легче реализовать в гибком компоненте, но на самом деле оно не даже смотреть близко, как граф.

Answer 1

Код, который у вас есть, пропускает некоторые моменты, четко указанные в документах Graphics.drawPath(), и имеет некоторые проблемы с отступом;).

Самая важная часть, что commands вектор должен содержать значения от GraphicsPathCommand, в вашем случае 2 для LINE_TO, чтобы рисовать линии между координатами.

Затем, чтобы получить желаемый график, вам необходимо заказать значения X (и значения Y соответственно). Я заказал эти значения вручную в коде и составил свои собственные значения Y для тестирования.

Затем в вашем цикле вы сначала добавили значения Y, а затем значения X в testdata, но это должно быть наоборот [x, y, x, y, x, y,...].

Только это дало мне отличный график, который указывал вниз. Так что я по-прежнему с тонкой настройки кода немного (см комментарии) и придумал это:
http://wonderfl.net/c/6BrY
(там вы можете раскошелиться его и играть с ним, видя результат мгновенно)

для прямого/позже ссылки здесь только код:

package { 
import flash.display.Shape; 
import flash.display.Sprite; 
import flash.display.GraphicsPathCommand; 

public class FlashTest extends Sprite { 

    public function FlashTest() { 
     var drawSprite:Sprite = new Sprite(); 

     //the values for the X axis need to be sorted! 
     var time:Array = new Array(3, 12, 41, 52, 58, 66, 98); 
     var money:Array = new Array(4, 3, 9, 20, 10, 8, 15); 

     var testdata:Vector.<Number>=new Vector.<Number>(); 
     var commands:Vector.<int> = new Vector.<int>(); 

     var currentY:Number, maxY:Number = 0; 
     //some "scaling" for the values, otherwise those are pixels 
     const scaleX:int = 3, scaleY:int = 10; 

     for(var i:int=0;i<money.length;i++){ 
      //first X values! 
      testdata.push(time[i]*scaleX); 

      //then Y values 
      currentY = money[i]*scaleY; 
      testdata.push(-currentY);//adding negative values so the graph goes upwards 
      if(currentY > maxY){ 
       maxY = currentY;//keep track of highest point in graph 
      } 

      commands.push(GraphicsPathCommand.LINE_TO); 
     } 

     //get the graph back to zero maxX/0 so it gets filled correctly (independent of last X value) 
     testdata.push(time[time.length-1]*scaleX, 0); 
     commands.push(GraphicsPathCommand.LINE_TO); 

     drawSprite.graphics.beginFill(0xFFFF0000); 
     drawSprite.graphics.drawPath(commands, testdata); 
     drawSprite.graphics.endFill(); 

     addChild(drawSprite); 
     drawSprite.y = maxY + 10;//moving the sprite down so the graph is completely visible (+10 pixel padding) 
     drawSprite.x = 10;//(+10 pixel padding) 

    } 
} 
}