Previous topicNext topic
Help > 开发指南 > 窗体开发 > 控件参考 > 控件参考 > 图表 > SmFlexChart > 属性 >
Zones

区域Zones

FlexChart 允许您创建和应用称为图表区域的彩色区域。彩色区域将图表上绘制的数据分类为区域，这使用户更容易阅读和理解数据。这有助于用户轻松识别特定数据点所在的类别。

为了解释创建区域如何提供帮助，请考虑客户满意度调查，该调查旨在确定客户是特定产品的推动者、被动客户还是批评者。调查中记录的响应可用于计算NPS（净推荐值），将客户分为发起人、被动者和批评者。此方案可以在 FlexChart 中实现，方法是将客户响应绘制为图表中的数据点，并使用面积图在彩色区域中对其进行分类，按线型数据系列分隔，如下所示：


在弹性图表中创建区域
在 FlexChart 中，可以通过 ChartSeries 类将区域创建为可用的数据系列。通过将 ChartType 属性设置为以不同颜色突出显示的区域，可以将每个区域创建为面积图。为了区分每个区域，可以在图表中创建线型数据系列作为阈值。

完成以下步骤以在弹性图表中创建区域。

1.创建一个名为“调查结果”的自定义类来记录调查结果数据。

Vb.Net
Public Class SurveyResult
    Public Property surveyNumber As Integer
    Public Property satisfaction As Integer

    Public Sub New(ByVal surveyNumber As Integer, ByVal satisfaction As Integer)
        Me.surveyNumber = surveyNumber
        Me.satisfaction = satisfaction
    End Sub
End Class

C#
 
/// Class for FlexChart's DataSource
/// </summary>
public class SurveyResult
    {
        public int surveyNumber { get; set; }
        public int satisfaction { get; set; }
        public SurveyResult(int surveyNumber, int satisfaction)
        {
            this.surveyNumber = surveyNumber;
            this.satisfaction = satisfaction;
        }
    }

2.创建一个名为 Zone 的自定义类，用于在 FlexChart 中创建区域。

Vb.Net
Public Class Zone
    Public Property Name As String
    Public Property Value As Double
    Public Property Fill As Color
End Class

C#
 
public class Zone
{
   public string Name { get; set; }
   public double Value { get; set; }
   public Color Fill { get; set; }
}

3.初始化调查结果和区域类的可观测集合类的新实例。

Vb.Net
results = New ObservableCollection(Of SurveyResult)()
zones = New ObservableCollection(Of Zone)()

C#
 
results = new ObservableCollection<SurveyResult>();
zones = new ObservableCollection<Zone>();

4.将数据源添加到弹性图表控件。

Vb.Net
Dim scores As Integer() = {8, 9, 9, 10, 3, 10, 6, 10, 7, 9}

For i As Integer = 0 To 10 - 1
    results.Add(New SurveyResult(i, scores(i)))
Next

flexChart1 = New SmFlexChart()
flexChart1.DataSource = results
flexChart1.BindingX = "surveyNumber"
flexChart1.ChartType = ChartType.Scatter

C#
 
//Add DataSource to the FlexChart
int[] scores = { 8, 9, 9, 10, 3, 10, 6, 10, 7, 9 };
for (int i = 0; i < 10; i++)
{
    results.Add(new SurveyResult(i, scores[i]));
}
flexChart1 = new SmFlexChart();
flexChart1.DataSource = results;
flexChart1.BindingX = "surveyNumber";
flexChart1.ChartType = ChartType.Scatter;

5.添加新的弹性图表系列。

Vb.Net
Dim satisfactionSeries = New SmSeries()
satisfactionSeries.Name = "Satisfaction"
satisfactionSeries.Binding = "satisfaction"
flexChart1.Series.Add(satisfactionSeries)

C#
 
//Add series in FlexChart
var satisfactionSeries = new SmSeries();
satisfactionSeries.Name = "Satisfaction";
satisfactionSeries.Binding = "satisfaction";
flexChart1.Series.Add(satisfactionSeries);


6.向图例添加区域。

Vb.Net
For i As Integer = 0 To zones.Count - 1
    Dim series = New SmSeries()
    series.ChartType = ChartType.Area
    series.Style.Fill = New SolidBrush(zones(i).Fill)
    series.Style.Stroke = New SolidBrush(Color.Transparent)
    series.Name = zones(i).Name
    flexChart1.Series.Add(series)
Next

flexChart1.Legend.Position = Position.Right

C#
 
//Add zones to legend
  for (int i = 0; i < zones.Count; i++)
  {
      var series = new SmSeries();
      series.ChartType = ChartType.Area;
      series.Style.Fill = new SolidBrush(zones[i].Fill);
      series.Style.Stroke = new SolidBrush(Color.Transparent);
      series.Name = zones[i].Name;
      flexChart1.Series.Add(series);
   }
  flexChart1.Legend.Position = Position.Right;

7.处理名为FlexChart1_Rendering事件的呈现事件以在 FlexChart 中绘制区域。除了标题、系列、轴、数据标签、图例、绘图区等基本元素外，还可以使用 Render 事件绘制其他元素，如线条、矩形、多边形、椭圆、字符串和图像。

Vb.Net
Private Sub FlexChart1_Rendering(ByVal sender As Object, ByVal e As RenderEventArgs)
    Dim chart As SmFlexChart = TryCast(sender, SmFlexChart)

    For i As Integer = 0 To zones.Count - 1
        Dim minY = If(i = 0, flexChart1.AxisY.ActualMin, zones(i - 1).Value)
        Dim maxY = If(i = zones.Count - 1, flexChart1.AxisY.ActualMax, zones(i).Value)
        Dim minX = flexChart1.AxisX.ActualMin
        Dim maxX = flexChart1.AxisX.ActualMax
        Dim pt1 = chart.DataToPoint(New PointF(CSng(minX), CSng(minY)))
        Dim pt2 = chart.DataToPoint(New PointF(CSng(maxX), CSng(maxY)))
        e.Engine.SetFill(New SolidBrush(zones(i).Fill))
        e.Engine.SetStroke(New SolidBrush(Color.Transparent))
        e.Engine.DrawRect(pt1.X, pt2.Y, Math.Abs(pt2.X - pt1.X), Math.Abs(pt2.Y - pt1.Y))
    Next
End Sub

C#
 
private void FlexChart1_Rendering(object sender, RenderEventArgs e)
{
     var chart = sender as SmFlexChart;
     for (int i = 0; i < zones.Count; i++)
     {
           //Get Min/Max range from FlexChart
           var minY = i == 0 ? flexChart1.AxisY.ActualMin : zones[i - 1].Value;
           var maxY = i == zones.Count-1 ? flexChart1.AxisY.ActualMax : zones[i].Value;
           var minX = flexChart1.AxisX.ActualMin;
           var maxX = flexChart1.AxisX.ActualMax;                
           var pt1 = chart.DataToPoint(new PointF((float)minX, (float)minY));
           var pt2 = chart.DataToPoint(new PointF((float)maxX, (float)maxY));
           //Draw Zone Rectangle.
           e.Engine.SetFill(new SolidBrush(zones[i].Fill));
           e.Engine.SetStroke(new SolidBrush(Color.Transparent));
           e.Engine.DrawRect(pt1.X, pt2.Y, Math.Abs(pt2.X - pt1.X), Math.Abs(pt2.Y - pt1.Y));
      }
}