转至元数据结尾
转至元数据起始

系列是在图表上绘制的一组相关数据点。默认情况下,FlexChart在设计时显示带有虚拟数据序列的柱形图。但是,您需要向控件提供数据以在运行时呈现图表。

在FlexChart中,系列由Series类表示  。尽管,轴和图表类型相关的属性通常是整个图表上设置,FlexChart还对于每个Series提供了  X轴,  Y轴,  图表类型,  数据源的分别设置。这在渲染混合图表,多轴等场景中很有用。  Series类还提供了Name属性,其表示该图表系列在图例中的文本值。对于折线图和面积图,还可以通过将InterpolateNulls属性设置为true来处理数据中的空值,以避免在绘制图表系列时出现间隙  。

添加一个系列

FlexChart允许您在设计时以及通过代码添加系列。请按照以下步骤添加系列:

在设计时界面

  1. 打开“ 属性”窗口以查看FlexChart属性。
  2. 导航到“Series”字段,然后单击其旁边的“ 省略号”按钮。
    显示带有预添加的Series 1的Series集合编辑器
  3. 单击“添加”按钮添加其他系列。

使用代码

要通过代码添加系列,请首先通过创建Series类的实例来创建  系列,然后使用Add方法将其添加到FlexChart系列集合中。可以通过FlexChart.Series属性访问FlexChart系列集合  。


CS
   // Adding a Series to chart and binding it(AxisY) to 'Orders' field of DataCollection    
   this.flexChart1.Series.Add(new C1.Win.Chart.Series
   {
     //Name property specifies the string to be displayed corresponding to this Series in Legend      
     Name = "Orders",
     Binding = "Orders"
   });

                        

将数据添加到系列

FlexChart提供了多种向图表系列添加数据的方法。您可以选择获取所有数据以从单个数据源绘制图表,也可以选择将特定系列或轴分别与单独的数据源绑定。有关绑定和向图表系列添加数据的更多信息,请参考 数据绑定

隐藏系列

FlexChart提供了灵活性,可以通过 Visibility属性在绘图区域以及图例上隐藏或显示系列  。该属性接受 SeriesVisibility枚举中的值,使您可以完全显示或隐藏系列,还可以选择仅在图例或绘图区域中显示系列。


CS
   // Adding a Series to chart and binding it(AxisY) to 'Orders' field of DataCollection
   this.flexChart1.Series.Add(new C1.Win.Chart.Series
   {
     //Name property specifies the string to be displayed corresponding to this Series in Legend 
     Name = "Orders",
     Binding = "Orders",
     Visibility = C1.Chart.SeriesVisibility.Plot
   });
        
                        

此外,FlexChart还提供了  LegendToggle属性,该属性允许最终用户通过单击相应的图例条目来切换系列的可见性。


CS
  // Displays or hides a series by clicking on corresponding legend entry    
  this.flexChart1.LegendToggle = true;    

系列样式

FlexChart提供了Series类的 Style属性  来更改系列的外观。对于散点图,线形符号等符号图,还可以通过设置SymbolMarker,  SymbolSize和  SymbolStyle属性来更改标记,标记的大小和样式  。此外,图表还提供了内置的图表调色板,因此您只需设置 Palette 属性即可轻松自定义图表的外观 。有关调色板的更多信息,请参见 外观和样式


CS
   // Style the series 
   this.flexChart1.Series[0].Style.StrokeColor = Color.Blue;
   this.flexChart1.Series[0].SymbolMarker = SymbolMarker.Cross;
   this.flexChart1.Series[0].SymbolSize = 20; 
 
 
  • 无标签