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; } } |
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; } } |
Vb.Net |
results = New ObservableCollection(Of SurveyResult)() zones = New ObservableCollection(Of Zone)() |
C# |
results = new ObservableCollection<SurveyResult>(); zones = new ObservableCollection<Zone>(); |
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; |
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; |
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)); } } |