プロット領域は、データポイントがプロットされるチャートの領域です。X 軸と Y 軸を持つチャートでは、これらの軸によってカバーされる領域がプロット領域になります。円グラフやサンバーストチャートのようなチャートでは、チャート自体がカバーする丸い領域がプロット領域になります。

プロット領域

FlexChart では、プロット領域は基本的な白い背景色でレンダリングされます。ただし、プロット領域の外観は、ChartStyle タイプの PlotStyle プロパティを使用して、要件に合わせてカスタマイズできます。ChartStyle クラスには、塗りつぶし、塗りつぶし色、線パターン、ストローク、ストローク幅、ストロークの破線パターンなどを設定するプロパティがあります。

// プロット領域を塗りつぶす色を設定します
this.flexChart1.PlotStyle.Fill = new SolidBrush(Color.Ivory) ;

// ストロークパターンに使用するブラシを設定します
this.flexChart1.PlotStyle.Stroke = Brushes.OrangeRed;

// 幅を設定します
this.flexChart1.PlotStyle.StrokeWidth = 2.0f;

// パターンを設定します
this.flexChart1.PlotStyle.LinePattern = C1.Chart.LinePatternEnum.Dash;

' プロット領域を塗りつぶす色を設定します
Me.flexChart1.PlotStyle.Fill = New SolidBrush(Color.LightGray)

' ストロークパターンに使用するブラシを設定します
Me.flexChart1.PlotStyle.Stroke = Brushes.DarkBlue

' 幅を設定します
Me.flexChart1.PlotStyle.StrokeWidth = 2.0F

' パターンを設定します
Me.flexChart1.PlotStyle.LinePattern = C1.Chart.LinePatternEnum.Dash

複数のプロット領域の作成

複数のプロット領域を作成すると、複数の系列を重ねるより、データが読みやすくなり、分析が容易になるというメリットがあります。軸や凡例などのチャートリソースの一部を共有しながら、複数の系列を各プロット領域に 1 つずつ描画することは、加速度、速度、および距離の時間変化を表示する下のグラフのようなシナリオで役立ちます。FlexChart では、PlotAreas コレクションにプロット領域を追加することで、複数のプロット領域を実装できます。系列を定義する際に、レンダリングする必要があるプロット名を指定します。FlexChart には、各プロット領域の高さ、幅、行インデックス、および列インデックスを設定するためのプロパティもあります。

複数のプロット領域

// 新しいプロット領域をFlexChartに追加します。Rowプロパティを使用してプロット領域を配置する位置を決定します
flexChart1.PlotAreas.Add(new PlotArea { Name = "plot1", Row = 1 });
flexChart1.PlotAreas.Add(new PlotArea { Name = "plot2", Row = 3 });
flexChart1.PlotAreas.Add(new PlotArea { Name = "plot3", Row = 5 });

// 新しい系列（Accelerationという）を作成して、PlotAreaNameを設定します
var acceleration = new Series
{
    Name = "Acceleration",
    DataSource = CreateDataPoints((x) => x, (y) => y, 20),
    AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot1"}
};
this.flexChart1.Series.Add(acceleration);

//  新しい系列（Velocityという）を作成して、PlotAreaNameを設定します
var velocity = new Series
{
    Name = "Velocity",
    DataSource = CreateDataPoints((x) => x, (y) => y * y, 20),
    AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot2"}

};
this.flexChart1.Series.Add(velocity);

// 新しい系列（Distanceという）を作成して、PlotAreaNameを設定します
var distance = new Series
{
    Name = "Distance",
    DataSource = CreateDataPoints((x) => x, (y) => 0.5 * y * y * y, 20),
    AxisY = new Axis {Position = Position.Left, MajorGrid = true, PlotAreaName = "plot3"}
};
this.flexChart1.Series.Add(distance);

' 新しいプロット領域をFlexChartに追加します。Rowプロパティを使用してプロット領域を配置する位置を決定します
flexChart1.PlotAreas.Add(New PlotArea() With {
      .Name = "plot1",
      .Row = 1
})
flexChart1.PlotAreas.Add(New PlotArea() With {
      .Name = "plot2",
      .Row = 3
})
flexChart1.PlotAreas.Add(New PlotArea() With {
      .Name = "plot3",
      .Row = 5
})

' 新しい系列（Accelerationという）を作成して、PlotAreaNameを設定します
Dim acceleration As Series = New Series() With {
      .Name = "Acceleration",
      .DataSource = CreateDataPoints(Function(x) x, Function(y) y, 20),
      .AxisY = New Axis() With {
          .Position = Position.Left,
          .MajorGrid = True,
          .PlotAreaName = "plot1"
    }
}
Me.flexChart1.Series.Add(acceleration)

'  新しい系列（Velocityという）を作成して、PlotAreaNameを設定します
Dim velocity As Series = New Series() With {
      .Name = "Velocity",
      .DataSource = CreateDataPoints(Function(x) x, Function(y) y * y, 20),
      .AxisY = New Axis() With {
          .Position = Position.Left,
          .MajorGrid = True,
          .PlotAreaName = "plot2"
    }
}
Me.flexChart1.Series.Add(velocity)

' 新しい系列（Distanceという）を作成して、PlotAreaNameを設定します
Dim distance As Series = New Series() With {
      .Name = "Distance",
      .DataSource = CreateDataPoints(Function(x) x, Function(y) 0.5 * y * y * y, 20),
      .AxisY = New Axis() With {
          .Position = Position.Left,
          .MajorGrid = True,
          .PlotAreaName = "plot3"
    }
}
Me.flexChart1.Series.Add(distance)

上記のサンプルコードは、CreateDataPoints という名前のカスタムメソッドを使用してランダムなデータを生成します。要件に基づいてデータソースを設定できます。

/// <summary>
/// FlexChartのデータを作成するメソッド
/// </summary>
public static List<PointD> CreateDataPoints(Func<double, double> funX, Func<double, double> funY, int count)
{
    var data = new List<PointD>();
    for (int i = 0; i < count; i++)
    {
        data.Add(new PointD
        {
            X = funX(i),
            Y = funY(i),
        });
    }
    return data;
}

''' <summary>
''' FlexChartのデータを作成するメソッド
''' </summary>
Public Shared Function CreateDataPoints(funX As Func(Of Double, Double), funY As Func(Of Double, Double), count As Integer) As List(Of PointD)
    Dim data As List(Of PointD) = New List(Of PointD)()
    For i As Integer = 0 To count - 1
        data.Add(New PointD() With {
              .X = funX(i),
              .Y = funY(i)
        })
    Next
    Return data
End Function