The XtraCharts suite provides a wide variety of different 2D chart types (also calledview types) which give you the ability to display data as any of the basic chart types, or even as a combination of different series views. In addition, if the data provided for a particular chart type is still valid for another chart type, you can change the current series view with a single click or line of code (see How to: Change the View of a Series). This makes the Chart Control more flexible and effective in representing data.redis
The topics listed in this section describe the 2D chart types available in XtraCharts, along with short descriptions on how to use them. The following 2D chart types are available:算法
A - Fexpress |
L - Rapp |
R - Side |
S工具 |
---|---|---|---|
|
|||
Moreover, XtraCharts introduces a special chart type that uses an optimized algorithm for quick series rendering, to afford representation of avery large quantity of points:
Also note that with XtraCharts, it's possible to combine several 2D charts together into a single composite chart. Refer to theCombining Different Series Views document, for more information on composite charts.
并且,XtraCharts引入了一个特殊的图表类型,使用优化算法处理快速序列渲染,来知足大量点的一个显示:这就是Swift Plot(迅捷快速绘制)。
请注意:使用XtraCharts,能够在单一的组合图表中一块儿联合使用几种2D图表。欲了解更多组合图的信息,请参考Combining Different Series Views文档。
Area Chart | ![]() |
The Area Chart is represented by the AreaSeriesView object, which belongs to Area Series Views. This view displays series as filled areas on a diagram, with each data point displayed as a peak or hollow in the area. This view is useful when you need to show trends for several series on the same diagram, and also show the relationship of the parts to the whole.
面积图由AreaSeriesView对象表示,属于Area Series Views区域序列视图集.这种视图经过填充图中区域显示序列,每个数据点被显示为区域中的一个峰值或空心。当你须要在同一个图表中展现几种序列趋势,而且显示部分和总体之间的关系时,区域图表将很是合适。
An Area chart is shown in the image below. Note that this chart type is based upon theXYDiagram, so it can be rotated to show bars either vertically or horizontally.
这幅图表的基类型是XYDiagram,因此能够被旋转显示为横型或竖型条形图。
The table below lists the main characteristics of this chart type.
最主要特性
Feature |
Value |
---|---|
Series View type序列视图类型 | AreaSeriesView |
Diagram type图类型 | 2D-XYDiagram |
Number of arguments per series point每个序列点的参数个数 | 1 |
Number of values per series point每个序列点的值个数 | 1 |
![]() |
---|
For information on which chart types can be combined with the Area Chart, refer to theCombining Different Series Views document. |
The following example demonstrates how to create a ChartControl with two series of the AreaSeriesView type, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include allnecessary assemblies to the References list of your project.
Then, add the following code to the Form.Load event handler.
用AreaSeriesView类型建立ChartControl,并添加图表到运行时窗体。在处理以前,首先新建一窗体应用程序,并包含须要的引用程序集。
而后,添加下列代码到Form.Load事件处理器。
Below are the essential libraries required by applications that use the XtraCharts Suite. These libraries are considered redistributable under the XtraCharts EULA and are intended for distribution by you to end-users of software applications that you create.
Assembly |
Description |
---|---|
DevExpress.Data.v13.1.dll | Implements the most basic functionality common to all DevExpress controls. This includes classes for data binding, skinning, printing, exporting, as well as many other auxiliary types and resources. |
DevExpress.Utils.v13.1.dll | Contains basic utility classes and common skins (e.g., DevExpress Style, VS2010 and Office 2010*). |
DevExpress.Printing.v13.1.Core.dll | Contains classes that implement the basic functionality for DevExpress printing libraries. |
DevExpress.XtraEditors.v13.1.dll | Contains a set of full-featured editors supported by the XtraEditors Suite. |
DevExpress.XtraNavBar.v13.1.dll | Contains a navigation bar component supported by the XtraNavBar suite. |
DevExpress.Charts.v13.1.Core.dll | All DevExpress Charting controls contain classes shared via the same charting engine. These classes, along with a codebase, are intended for internal use, but also provide the basic functionality forASP.NET Charts,WinForms Charts, as well as WPF Charts and Silverlight Charts. |
DevExpress.XtraCharts.v13.1.dll | Contains basic classes that implement the main functionality for the XtraCharts suite. |
DevExpress.XtraCharts.v13.1.UI.dll | Contains the ChartControl control that is intended for use in Windows applications. |
DevExpress.XtraCharts.v13.1.Wizard.dll | Contains the ChartWizard and auxiliary classes. |
|
||||||
using DevExpress.XtraCharts;
// ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl areaChart = new ChartControl(); // Create two area series. Series series1 = new Series("Series 1", ViewType.Area); Series series2 = new Series("Series 2", ViewType.Area); // Add points to them. series1.Points.Add(new SeriesPoint(1, 15)); series1.Points.Add(new SeriesPoint(2, 18)); series1.Points.Add(new SeriesPoint(3, 25)); series1.Points.Add(new SeriesPoint(4, 33)); series2.Points.Add(new SeriesPoint(1, 10)); series2.Points.Add(new SeriesPoint(2, 12)); series2.Points.Add(new SeriesPoint(3, 14)); series2.Points.Add(new SeriesPoint(4, 17)); // Add both series to the chart. areaChart.Series.AddRange(new Series[] { series1, series2 }); // Set the numerical argument scale types for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.Numerical; series2.ArgumentScaleType = ScaleType.Numerical; // Access the view-type-specific options of the series. ((AreaSeriesView)series1.View).Transparency = 80; // Access the type-specific options of the diagram. ((XYDiagram)areaChart.Diagram).EnableAxisXZooming = true; // Hide the legend (optional). areaChart.Legend.Visible = false; // Add the chart to the form. areaChart.Dock = DockStyle.Fill; this.Controls.Add(areaChart); }
|
![]() |
---|
The complete sample project is available in the DevExpress Code Central database athttp://www.devexpress.com/example=E146. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
Bubble Chart | ![]() |
The Bubble Chart is represented by theBubbleSeriesView object, which belongs to Point Series Views. This view, in addition to other point diagram capabilities, allows you to visually represent data that has a third dimension (it is theBubbleLabelValueToDisplay.Weight of a series point), expressed in a bubble's size. You map two dimensions along the usual X and Y axes, and then the third dimension is displayed as a shape (a filled circle - "bubble", or a star, triangle, etc.) at the data point. Also, you can specify the size of the smallest and largest marker for the chart, by using theBubbleSeriesView.MaxSize andBubbleSeriesView.MinSize properties of the series view.
气泡图由BubbleSeriesView对象表示,属于Point Series Views点序列视图集。这种视图,除了具备其余点状图表的功能外,还能够增长第三维(要显示值的气泡标签权重BubbleLabelValueToDisplay.Weight)经过气泡的大小来可视化的显示数据。只需映射传统的X和Y轴,第三维就会在数据点处显示为一个几何形状(一个填充圆-“气泡”,或者是星形,三角形等等)。你也能够经过设置序列视图的BubbleSeriesView.MaxSize and BubbleSeriesView.MinSize属性指定图表标记的最小和最大尺寸。
An example of the Bubble chart is shown in the image below. Note that this chart type is based upon theXYDiagram, so it can be rotated to change axis positions.
继承自XYDiagram,能够旋转改变轴的位置。
The table below lists the main characteristics of this chart type.
气泡图主要特定
Feature |
Value |
---|---|
Series View type | BubbleSeriesView气泡序列视图 |
Diagram type | 2D-XYDiagram |
Number of arguments per series point | 1每个点的自变量个数为1 |
Number of values per series point | 2 (Value and Weight)每个点因变量个数为2(值和权重) |
![]() |
---|
For information on which chart types can be combined with the Bubble Chart, refer to theCombining Different Series Views document. |
The following example demonstrates how to create aChartControl with two series of the BubbleSeriesView type, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include allnecessary assemblies to the References list of your project.
Then, add the following code to theForm.Load event handler.
|
||||||
using System;
using System.Windows.Forms; using DevExpress.XtraCharts; // ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl bubbleChart = new ChartControl(); // Create two bubble series. Series series1 = new Series("Series 1", ViewType.Bubble); Series series2 = new Series("Series 2", ViewType.Bubble); // Add points to them. series1.Points.Add(new SeriesPoint(1, 11, 2)); series1.Points.Add(new SeriesPoint(2, 10, 1)); series1.Points.Add(new SeriesPoint(3, 14, 3)); series1.Points.Add(new SeriesPoint(4, 17, 2)); series2.Points.Add(new SeriesPoint(1, 15, 3)); series2.Points.Add(new SeriesPoint(2, 18, 4)); series2.Points.Add(new SeriesPoint(3, 25, 2)); series2.Points.Add(new SeriesPoint(4, 33, 1)); // Add both series to the chart. bubbleChart.Series.AddRange(new Series[] { series1, series2 }); // Set the numerical argument scale types for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.Numerical; series2.ArgumentScaleType = ScaleType.Numerical; // Access the view-type-specific options of the series. ((BubbleSeriesView)series1.View).MaxSize = 2; ((BubbleSeriesView)series1.View).MinSize = 1; ((BubbleSeriesView)series1.View).BubbleMarkerOptions.Kind = MarkerKind.Circle; // Access the type-specific options of the diagram. ((XYDiagram)bubbleChart.Diagram).EnableAxisXZooming = true; // Hide the legend (if necessary). bubbleChart.Legend.Visible = false; // Add the chart to the form. bubbleChart.Dock = DockStyle.Fill; this.Controls.Add(bubbleChart); }
|
![]() |
---|
The complete sample project is available in the DevExpress Code Central database athttp://www.devexpress.com/example=E904. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
Candle Stick Chart | ![]() |
The Candle Stick Chart is represented by theCandleStickSeriesView object, which belongs to Financial Series Views (also called Low-High-Open-Close).
烛台图表由CandleStickSeriesView对象表示,属于金融序列视图集(也被称为股票图 –最低-最高--开盘-收盘)
This view is used to show the variation in the price of stock over the course of a day. Each point consists of a rectangle (body the bottom and top values of which correspond to theOpen and Close prices) and a vertical line (shadow,wick ortail the bottom and top values of which correspond to theLow andHigh prices). If the stock closes higher than its opening price, the body is hollow. And if the stock closes lower than its opening price, the body is filled.
这个视图用来表示漫长的一天中股票价格的变化趋势。每个点由一个矩形(矩形体 底部和顶部的值至关于股票价格中的开盘和收盘)和一条垂直线(影子,灯芯或尾巴 底部和顶部的值至关于股票中的最低最高价)组成。若是股票的收盘价高于开盘价,矩形体就是空心的。若是收盘价低于开盘价,矩形体就是实心的。
For Candle Stick charts, you can choose for which price level (Low, High, Open or Close) to enableFinancialSeriesViewBase.ReductionOptions, meaning that in case the specified price is lower in comparison to the previous point's value, the subsequent point is painted red (or any other color).
对于阴阳烛图,能够选择何种价格级别(低价、高价、开盘、收盘)来启用FinancialSeriesViewBase.ReductionOptions,即在指定的价格低于前面的点的值的状况下,后续点被标记为红色(或其余任何一种颜色)
A Candle Stick chart is shown in the image below. Note that this chart type is based uponXYDiagram, so it can be rotated to show bars either vertically or horizontally.
继承自XYDiagram,因此工具条既能够垂直也能够水平显示。
To learn how to exclude holidays and weekends from an axis scale, refer toDate-Time Data Representation.
若是想学习如何在轴刻度中包含节日和周末,参考Date-Time Data Representation.For more information, see Financial Charting.
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type序列视图类型 | CandleStickSeriesView |
Diagram type | 2D-XYDiagram |
Number of arguments per series point 每个序列点的参数数量 |
1 |
Number of values per series point 每个序列点的值数量 |
4 (Low, High, Open, Close) 4() |
![]() |
---|
For information on which chart types can be combined with the Candle Stick Chart, refer to theCombining Different Series Views document. |
![]() |
---|
The complete sample project is available in the DevExpress Code Central database athttp://www.devexpress.com/example=E1217. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
This example demonstrates how to create aChartControl with a series of the CandleStickSeriesView type, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include allnecessary assemblies to the References list of your project.
Then, add the following code to theForm.Load event handler.
Note that you can exclude non-working days (weekends and holidays) from an axis range, via theAxisBase.WorkdaysOnly andAxisBase.WorkdaysOptions properties. And, to learn which instruments for financial analysis are available in XtraCharts, refer toIndicators.
|
||||||
using System;
using System.Windows.Forms; using DevExpress.XtraCharts; // ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl candlestickChart = new ChartControl(); // Create a candlestick series. Series series1 = new Series("Stock Prices", ViewType.CandleStick); // Specify the date-time argument scale type for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.DateTime; // Add points to it. series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 1), new object[] { 24.00, 25.00, 25.00, 24.875 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 2), new object[] { 23.625, 25.125, 24.00, 24.875 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 3), new object[] { 26.25, 28.25, 26.75, 27.00 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 4), new object[] { 26.50, 27.875, 26.875, 27.25 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 7), new object[] { 26.375, 27.50, 27.375, 26.75 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 8), new object[] { 25.75, 26.875, 26.75, 26.00 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 9), new object[] { 25.75, 26.75, 26.125, 26.25 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 10), new object[] { 25.75, 26.375, 26.375, 25.875 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 11), new object[] { 24.875, 26.125, 26.00, 25.375 })); series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 14), new object[] { 25.125, 26.00, 25.625, 25.75 })); // Add the series to the chart. candlestickChart.Series.Add(series1); // Access the view-type-specific options of the series. CandleStickSeriesView myView = (CandleStickSeriesView)series1.View; myView.LineThickness = 2; myView.LevelLineLength = 0.25; // Specify the series reduction options. myView.ReductionOptions.Level = StockLevel.Open; myView.ReductionOptions.Visible = true; // Access the chart's diagram. XYDiagram diagram = ((XYDiagram)candlestickChart.Diagram); // Access the type-specific options of the diagram. diagram.AxisY.Range.MinValue = 22; // Exclude weekends from the X-axis range, // to avoid gaps in the chart's data. diagram.AxisX.DateTimeScaleOptions.WorkdaysOnly = true; // Hide the legend (if necessary). candlestickChart.Legend.Visible = false; // Add a title to the chart (if necessary). candlestickChart.Titles.Add(new ChartTitle()); candlestickChart.Titles[0].Text = "Candlestick Chart"; // Add the chart to the form. candlestickChart.Dock = DockStyle.Fill; this.Controls.Add(candlestickChart); }
|
See Also
Doughnut Chart | ![]() |
The Doughnut Chart is represented by the DoughnutSeriesView object, which belongs to Pie, Doughnut and Funnel Series Views. This view is useful when it's necessary to compare the percentage values of different point arguments in the same series, and to illustrate these values as easy to understand pie slices, but with a hole in its center.
环形图表明DoughnutSeriesView对象,属于Pie, Doughnut and Funnel Series Views(饼、环和漏斗序列视图集).当须要比较同种序列不一样种参数的百分比时很是有用,并显示这些值为简单的饼状切片,可是在中心有一个孔。
A Doughnut chart is shown in the image below. Note that if a chart contains several series of theDoughnutSeriesView type (as well asPieSeriesView), all these series are displayed in the same diagram according to theSimpleDiagram.Dimension and SimpleDiagram.LayoutDirectionproperty values.
下图是一个环形图表。注意,若是一个图表包含几种环形序列视图类型(也包括病状序列视图),全部这些序列依据SimpleDiagram.DimensionandSimpleDiagram.LayoutDirection 属性值在同一个图中显示,
Note that to control the size of the doughnut's hole, use the DoughnutSeriesView.HoleRadiusPercent (or Doughnut3DSeriesView.HoleRadiusPercent) property. For example, in the above image this property is set to0 for the left chart.
控制环形图中孔洞的大小,使用DoughnutSeriesView.HoleRadiusPercent (orDoughnut3DSeriesView.HoleRadiusPercent)属性。举例:上面的图片中,左侧的图表中洞的百分比被设为0.
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type序列视图类型 | DoughnutSeriesView |
Diagram type | 2D-SimpleDiagram |
Number of arguments per series point 每一个序列点输入参数值(自变量)个数 |
1 |
Number of values per series point 每一个序列点输出参数值(因变量)个数 |
1 |
![]() |
---|
For information on which chart types can be combined with the Doughnut Chart, refer to theCombining Different Series Views document. |
The following example demonstrates how to create a ChartControl with a series of the DoughnutSeriesView type, set its general properties, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include allnecessary assemblies to the References list of your project.
以下示例演示使用DoughnutSeriesView类型来建立图表控件,设置通用属性,并添加到运行时窗体。
Then, add the following code to the Form.Load event handler.
![]() |
---|
The complete sample project is available in the DevExpress Code Central database athttp://www.devexpress.com/example=E1047. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
Full-Stacked Area Chart | ![]() |
The Full-Stacked Area Chart (100% Stacked Area Chart) is represented by theFullStackedAreaSeriesView object, which belongs to Area Series Views. This view displays series as areas on a diagram, so that the value of each data point is stacked with all the other corresponding data points' values. In this instance, the height of the area is always the full height of the chart diagram (i.e. 1). This view is useful for comparing the percentage values of several series for the same point arguments.
全堆积面积图表示FullStackedAreaSeriesView对象,属于面积序列视图集。这种视图在同一个图解(图示)中以面积区域显示序列,所以每个数据点的值被全部其余相关数据点的值堆满了。在这种状况下,区域的高度一般是图表图解的所有高度(示例1).这在比较相同输入参数(自变量)的几种百分比值输出时很是有用。
A Full-Stacked Area chart is shown in the image below. Note that this chart type is based upon theXYDiagram, so it can be rotated to show bars either vertically or horizontally.
图表类型:XYDiagram,因此能够旋转工具条到水平或垂直位置。
![]() |
---|
A Full-Stacked Area chart can display series containing data points with positive or negative values. However, a series with positive values is stacked only with other series containing positive values; and a series with negative values is stacked with other series containing negative values. 全覆盖面积图表能够显示正值,也能够显示包含负值数据点的序列。可是,包含正值的序列仅能和其余包含正值的序列一块儿堆积,包含负值的序列仅能和包含负值的序列一块儿堆积。 Note that if a series contains data points with both positive and negative values, it is treated as a series with positive values, while all its negative values are treated as zeros. 若是一个序列既包含正数也包含负数的值,将被看作是正数序列,序列中的全部负值被当作零值。
|
图表类型特性
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type | FullStackedAreaSeriesView |
Diagram type | 2D-XYDiagram |
Number of arguments per series point | 1 |
Number of values per series point | 1 |
![]() |
---|
For information on which chart types can be combined with the Full-Stacked Area Chart, refer to theCombining Different Series Views document. |
The following example demonstrates how to create a ChartControl with two series of the FullStackedAreaSeriesView type, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include allnecessary assemblies to the References list of your project.
Then, add the following code to the Form.Load event handler.
下面示例演示了如何建立一个有两个FullStackedAreaSeriesView类型序列的图表控件,并在运行时添加图表到窗体。
C# | using DevExpress.XtraCharts;
// ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl FullStackedAreaChart = new ChartControl(); // Create two full-stacked area series. Series series1 = new Series("Series 1", ViewType.FullStackedArea); Series series2 = new Series("Series 2", ViewType.FullStackedArea); // Add points to them. series1.Points.Add(new SeriesPoint(1, 10)); series1.Points.Add(new SeriesPoint(2, 12)); series1.Points.Add(new SeriesPoint(3, 14)); series1.Points.Add(new SeriesPoint(4, 17)); series2.Points.Add(new SeriesPoint(1, 15)); series2.Points.Add(new SeriesPoint(2, 18)); series2.Points.Add(new SeriesPoint(3, 25)); series2.Points.Add(new SeriesPoint(4, 33)); // Add both series to the chart. FullStackedAreaChart.Series.AddRange(new Series[] { series1, series2 }); // 设置参数类型为数值型,由于默认为定性类型参数 Set the numerical argument scale types for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.Numerical; series2.ArgumentScaleType = ScaleType.Numerical; // Access the view-type-specific options of the series. ((FullStackedAreaSeriesView)series1.View).Transparency = 50; ((FullStackedAreaSeriesView)series2.View).Transparency = 50; //获取图解控制 Access the type-specific options of the diagram. ((XYDiagram)FullStackedAreaChart.Diagram).EnableAxisXZooming = true; // Hide the legend (if necessary). FullStackedAreaChart.Legend.Visible = false; // Add the chart to the form. FullStackedAreaChart.Dock = DockStyle.Fill; this.Controls.Add(FullStackedAreaChart); } |
VB | |
![]() |
---|
The complete sample project is available in the DevExpress Code Central database athttp://www.devexpress.com/example=E1207. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
Full-Stacked Bar Chart | ![]() |
The Full-Stacked Bar Chart (100%-Stacked Bar Chart) is represented by the FullStackedBarSeriesView object, which belongs to Bar and Column Series Views. This view displays all series stacked, with a single bar for each category. The height of each bar is always the full height of the chart diagram (i.e. 1). The series values are displayed as percentages of each bar.
所有堆叠条形图用FullStackedBarSeriesView对象表示,属于条和列序列视图集Bar and Column Series Views。这种类型将堆叠显示全部序列,每个条状表明一个类别。
A Full-Stacked Bar chart is shown in the image below. Note that this chart type is based upon the XYDiagram, and so it can be rotated to show bars either vertically or horizontally.
![]() |
---|
A Full-Stacked Bar chart can display series containing data points with positive or negative values. However, a series with positive values is stacked only with other series containing positive values; and a series with negative values is stacked with other series containing negative values. Note that if a series contains data points with both positive and negative values, it is treated as a series with positive values, while all its negative values are treated as zeros.
|
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type | FullStackedBarSeriesView |
Diagram type | 2D-XYDiagram |
Number of arguments per series point | 1 |
Number of values per series point | 1 |
![]() |
---|
For information on which chart types can be combined with the Full-Stacked Bar Chart, refer to the Combining Different Series Views document. |
The following example demonstrates how to create a ChartControl with two series of the FullStackedBarSeriesView type, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include all necessary assemblies to the References list of your project.
Then, add the following code to the Form.Load event handler.
C# | using DevExpress.XtraCharts;
// ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl FullStackedBarChart = new ChartControl(); // Create two full-stacked bar series. Series series1 = new Series("Series 1", ViewType.FullStackedBar); Series series2 = new Series("Series 2", ViewType.FullStackedBar); // Add points to them. series1.Points.Add(new SeriesPoint(1, 10)); series1.Points.Add(new SeriesPoint(2, 12)); series1.Points.Add(new SeriesPoint(3, 14)); series1.Points.Add(new SeriesPoint(4, 17)); series2.Points.Add(new SeriesPoint(1, 15)); series2.Points.Add(new SeriesPoint(2, 18)); series2.Points.Add(new SeriesPoint(3, 25)); series2.Points.Add(new SeriesPoint(4, 33)); // Add both series to the chart. FullStackedBarChart.Series.AddRange(new Series[] { series1, series2 }); // Set the numerical argument scale types for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.Numerical; series2.ArgumentScaleType = ScaleType.Numerical; // Access the view-type-specific options of the series. ((FullStackedBarSeriesView)series1.View).BarWidth = 0.4; // Access the type-specific options of the diagram. ((XYDiagram)FullStackedBarChart.Diagram).EnableAxisXZooming = true; // Hide the legend (if necessary). FullStackedBarChart.Legend.Visible = false; // Add the chart to the form. FullStackedBarChart.Dock = DockStyle.Fill; this.Controls.Add(FullStackedBarChart); } |
![]() |
---|
The complete sample project is available in the DevExpress Code Central database at http://www.devexpress.com/example=E1206. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example online or download an auto-executable sample. |
Full-Stacked Line Chart | ![]() |
The Full-Stacked Line Chart (100%-Stacked Line Chart) is represented by the FullStackedLineSeriesView object, which belongs to Point, Line and Spline Series Views. This chart is useful when it is necessary to compare how much each series adds to the total aggregate value for specific arguments.
对于指定参数,全堆叠折线图用来比较每个序列添加到合计值中的比例。好比对于USA,Hydro-electric(水力发电)占3%,Oil石油站40,%,总共占能源中的43%,Natural gas(自然气)占25%,三种能源一块儿占总能源的68%。
全堆折线图用FullStackedLineSeriesView对象表示,属于点,线和样条序列视图集Point, Line and Spline Series Views.在比较
A Full-Stacked Line chart is shown in the image below. Note that this chart type is based upon XYDiagram, and so it can be rotated to show lines either vertically or horizontally.
![]() |
---|
A Full-Stacked Line chart can display series containing data points with positive or negative values. However, a series with positive values is stacked only with other series containing positive values; and a series with negative values is stacked with other series containing negative values. Note that if a series contains data points with both positive and negative values, it is treated as a series with positive values, while all its negative values are treated as zeros.
|
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type | FullStackedLineSeriesView |
Diagram type | 2D-XYDiagram |
Number of arguments per series point | 1 |
Number of values per series point | 1 |
![]() |
---|
For information on which chart types can be combined with the Full-Stacked Line Chart, refer to the Combining Different Series Views document. |
Full-Stacked Spline Area Chart | ![]() |
The Full-Stacked Spline Area Chart (100% Stacked Spline Area Chart) is represented by the FullStackedSplineAreaSeriesView object, which belongs to Area Series Views. This view is similar to Full-Stacked Area Chart, but plots a fitted curve through each data point in a series.
全堆积样条面积图表用FullStackedSplineAreaSeriesView对象表示,属于面积序列视图集,与全堆积面积图表相似,可是绘制一个经过各序列点的拟合曲线。
A Full-Stacked Spline Area chart is shown in the image below. Note that this chart type is based upon the XYDiagram, so it can be rotated to show bars either vertically or horizontally.
![]() |
---|
A Full-Stacked Spline Area chart can display series containing data points with positive or negative values. However, a series with positive values is stacked only with other series containing positive values; and a series with negative values is stacked with other series containing negative values. Note that if a series contains data points with both positive and negative values, it is treated as a series with positive values, while all its negative values are treated as zeros.
|
The table below lists the main characteristics of this chart type.
Feature |
Value |
---|---|
Series View type | FullStackedSplineAreaSeriesView |
Diagram type | 2D-XYDiagram |
Number of arguments per series point | 1 |
Number of values per series point | 1 |
![]() |
---|
For information on which chart types can be combined with the Full-Stacked Spline Area Chart, refer to the Combining Different Series Viewsdocument. |
The following example demonstrates how to create a ChartControl with a series of the FullStackedSplineAreaSeriesView type, set its general properties, and add this chart to a form at runtime. Before proceeding with this example, first create a Windows Forms Application in Visual Studio, and include all necessary assemblies to the References list of your project.
Then, add the following code to the Form.Load event handler.
C# | using System;
using System.Windows.Forms; using DevExpress.XtraCharts; // ... private void Form1_Load(object sender, EventArgs e) { // Create an empty chart. ChartControl fullStackedSplineAreaChart = new ChartControl(); // Create two series of the FullStackedSplineArea view type. Series series1 = new Series("Series 1", ViewType.FullStackedSplineArea); Series series2 = new Series("Series 2", ViewType.FullStackedSplineArea); // Populate both series with points. series1.Points.Add(new SeriesPoint("A", 80)); series1.Points.Add(new SeriesPoint("B", 20)); series1.Points.Add(new SeriesPoint("C", 50)); series1.Points.Add(new SeriesPoint("D", 30)); series2.Points.Add(new SeriesPoint("A", 40)); series2.Points.Add(new SeriesPoint("B", 60)); series2.Points.Add(new SeriesPoint("C", 20)); series2.Points.Add(new SeriesPoint("D", 80)); // Add the series to the chart. fullStackedSplineAreaChart.Series.AddRange(new Series[] { series1, series2}); // Adjust the view-type-specific options of the series. ((FullStackedSplineAreaSeriesView)series1.View).LineTensionPercent = 80; ((FullStackedSplineAreaSeriesView)series2.View).Transparency = 80; // Access the diagram's options. ((XYDiagram)fullStackedSplineAreaChart.Diagram).Rotated = true; // Add a title to the chart and hide the legend. ChartTitle chartTitle1 = new ChartTitle(); chartTitle1.Text = "Full Stacked Spline Area Chart"; fullStackedSplineAreaChart.Titles.Add(chartTitle1); fullStackedSplineAreaChart.Legend.Visible = false; // Add the chart to the form. fullStackedSplineAreaChart.Dock = DockStyle.Fill; this.Controls.Add(fullStackedSplineAreaChart); } |