Area charts_ActionScript Graphing Cookbook-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

Area charts

In the previous recipes we've learned:

Transforming the data so that it shows up at the right location on the screen
Using the correct data structure so it's easy to display it

In the remaining recipes in this chapter, we will look into ActionScript's drawing methods and show you a few ways to customize the display.

This recipe looks at drawing area charts. They resemble a function chart, but the area between the chart line and the x-axis is filled. They are ideal to represent volumes.

Getting ready

Create a Recipe6 document class and set up the graph as in the previous recipe. We will use the two-dimensional data set because we will need an ordered data set:

package  
{
  import flash.display.Sprite;

  public class Recipe6 extends Sprite
  {
    private var graph:Graph;
    private var data:Array = [[0, 20], [50, 70], [100, 0], [150, 150], [200, 300], [250, 200], [300, 400], [350, 20], [400, 60], [450, 250], [500, 90], [550, 400], [600, 500], [650, 450], [700, 320]];
    public function Recipe6() 
    {
      graph = new Graph( -50, 550, 750, -50);
      addChild(graph);
      graph.drawHorizontalAxis(0, 0, 700, 50, ["0", "700"]);
      graph.drawVerticalAxis(0, 0, 500, 50, ["0","250","500"]);
    }

  }
}

How to do it...

Add the following code to the Recipe6 constructor:
```
for (var i:Number = 1; i < data.length; i++)
{
  graph.drawLine(data[i-1][0], data[i-1][1], data[i][0], data[i][1]);
}
```
Running the program at this point will yield the data set from the previous recipe, but now connected with a line.

In the Graph class, we create a copy of the drawLine method and name it drawArea. In the main program, we now replace the drawLine call. The result should still be the same. But now we change the code so that the area is filled:

public function drawArea(x1:Number, y1:Number, x2:Number, y2:Number):void
{
  var transformedLocation1:Point = matrix.transformPoint(new Point(x1, y1));
  var transformedLocation2:Point = matrix.transformPoint(new Point(x2, y2));
  var transformedOrigin:Point    = matrix.transformPoint(new Point(0, 0));

  var area:Shape = new Shape();
  area.graphics.beginFill(0xff9933);
  area.graphics.moveTo(transformedLocation1.x, transformedLocation1.y);
  area.graphics.lineTo(transformedLocation2.x, transformedLocation2.y);
  area.graphics.lineTo(transformedLocation2.x, transformedOrigin.y);
  area.graphics.lineTo(transformedLocation1.x, transformedOrigin.y);
  area.graphics.endFill();
  addChild(area);
}

If you run the program now, you should see an orange area chart. Everything below the line is now nicely filled with the orange color.

How it works...

This recipe is created in two steps: first, display a line chart and next, fill the void beneath the line to obtain an area.

Because drawing a line requires two points, we start counting at 1 instead of 0. In the loop, we draw a line between the previous point and the current one.

There are two other things to note from the code:

We calculate the transformed origin. Actually, we only need the 0 y-coordinate, but it's easier to just use the matrix for this calculation.
Instead of drawing a line between two points, we create a "fill" between four points: the two that were used for the line and the two on the x-axis (with y = 0).

There's more...

As with previous recipes, there's a lot that can be customized. Most of these will be discussed in some of the next recipes, but there's nothing keeping you from starting to experiment.

Having the color as a parameter

Right now, the fill color is fixed. You can make this a variable by using it as an argument to the drawArea method.

The fill style

If you check out the ActionScript documentation, you'll find that there are two more ways of creating fills: the beginGradientFill and beginBitmapFill methods. They are a bit more complicated, but can be used to obtain dramatic effects.