绘图区域是绘制数据点的图表区域。在具有X和Y轴的图表中，绘图区域也指的是XY轴所覆盖的区域。在饼图或旭日图等图表中，绘图区域是指图表本身实际覆盖的圆形区域。

在FlexChart中，绘图区域以基本的白色背景色呈现。但是，您可以使用ChartStyle类型的PlotStyle属性来自定义绘图区域的外观以符合您的要求。ChartStyle类提供属性来设置填充，填充颜色，线条图案，笔触，笔触宽度，笔触虚线类型等

CS

//Setting color that fills the plot area
this.flexChart1.PlotStyle.Fill = new SolidBrush(Color.Ivory) ;

//Setting brush to be used for stroke pattern
this.flexChart1.PlotStyle.Stroke = Brushes.OrangeRed;

//Setting width to be used for stroke pattern
this.flexChart1.PlotStyle.StrokeWidth = 2.0f;

//Setting pattern to be used stroke
this.flexChart1.PlotStyle.LinePattern = C1.Chart.LinePatternEnum.Dash;

创建多个绘图区域

多个绘图区域优于多个重叠序列，因为它们增加了数据的可读性，因此有助于更好的分析。绘制多个序列，在每个绘图区域绘制一个序列，同时共享一些图表资源（例如X轴，图例等），对于下图所示的场景很有用，该场景演示了加速度，速度和距离随时间序列的变化。在FlexChart中，可以通过将绘图区域添加到PlotAreas集合中来实现多个绘图区域，并在定义系列时指定必须在其中渲染该绘图区域的绘图区域的Name属性。FlexChart还提供属性来设置每个绘图区域的高度，宽度，行索引和列索引。

CS

//Add new PlotAreas to FlexChart, Row property decides where to place the PlotArea
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 });

//Create new series for Acceleration and set PlotAreaName specifying in which plot to render this series
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);

//Create new series for Velocity and set PlotAreaName specifying in which plot to render this series
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);

//Create new series for distance and set PlotAreaName specifying in which plot to render this series
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);

请注意，上面的示例代码使用名为CreateDataPoints的自定义方法来生成随机数据。您也可以根据需要设置数据源。

CS

/// <summary>
/// Method for creating data for 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;
}

页面树结构

Plot Area（绘图区域）

创建多个绘图区域