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.
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 - F |
L - R |
R - S |
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 |
 Note |
|---|
|
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);
}
|
 Show Me |
|---|
|
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 | |
2、气泡图
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（值和权重） |
| Note |
|---|
|
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);
}
|
| Show Me |
|---|
|
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 | |
3、烛台图表
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（） |
| Note |
|---|
|
For information on which chart types can be combined with the Candle Stick Chart, refer to theCombining Different Series Views document. |
| Show Me |
|---|
|
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 | |
4、环形图
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 |
| Note |
|---|
|
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.
- using System;
- using System.Windows.Forms;
- using DevExpress.XtraCharts;
- // ...
- private void Form1_Load(object sender, EventArgs e) {
- // Create a new chart.
- ChartControl DoughnutChart = new ChartControl();
- // Create a doughnut series.
- Series series1 = new Series("Series 1", ViewType.Doughnut);
- // Populate the series with points.
- series1.Points.Add(new SeriesPoint("Russia", 17.0752));
- series1.Points.Add(new SeriesPoint("Canada", 9.98467));
- series1.Points.Add(new SeriesPoint("USA", 9.63142));
- series1.Points.Add(new SeriesPoint("China", 9.59696));
- series1.Points.Add(new SeriesPoint("Brazil", 8.511965));
- series1.Points.Add(new SeriesPoint("Australia", 7.68685));
- series1.Points.Add(new SeriesPoint("India", 3.28759));
- series1.Points.Add(new SeriesPoint("Others", 81.2));
- // Add the series to the chart.
- DoughnutChart.Series.Add(series1);
- // 值的数字化选项，格式化=格式化为百分比.
- series1.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent;
- series1.PointOptions.ValueNumericOptions.Precision = 0;
- // 序列点如何排序：升序，排序键：自变量.
- series1.SeriesPointsSorting = SortingMode.Ascending;
- series1.SeriesPointsSortingKey = SeriesPointKey.Argument;
- //指定序列标签的行为：两列 点视图：自变量和因变量Specify the behavior of series labels.
- ((DoughnutSeriesLabel)series1.Label).Position = PieSeriesLabelPosition.TwoColumns;
- ((DoughnutSeriesLabel)series1.Label).ResolveOverlappingMode = ResolveOverlappingMode.Default;
- ((DoughnutSeriesLabel)series1.Label).ResolveOverlappingMinIndent = 5;
- ((PiePointOptions)series1.PointOptions).PointView = PointView.ArgumentAndValues;
- // 爆炸点 0 爆照百分比距离 30Adjust the view-type-specific options of the series.
- ((DoughnutSeriesView)series1.View).ExplodedPoints.Add(series1.Points[0]);
- ((DoughnutSeriesView)series1.View).ExplodedDistancePercentage = 30;
- // 维度：2维 Access the diagram's options.
- ((SimpleDiagram)DoughnutChart.Diagram).Dimension = 2;
- // 添加标题，隐藏图例Add a title to the chart and hide the legend.
- ChartTitle chartTitle1 = new ChartTitle();
- chartTitle1.Text = "3D Doughnut Chart";
- DoughnutChart.Titles.Add(chartTitle1);
- DoughnutChart.Legend.Visible = false;
- // Add the chart to the form.
- DoughnutChart.Dock = DockStyle.Fill;
- this.Controls.Add(DoughnutChart);
- }
| Show Me |
|---|
|
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 | |
5、全堆积面积图
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，所以可以旋转工具条到水平或垂直位置。
| Note |
|---|
|
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 |
| Note |
|---|
|
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 |
|
| Show Me |
|---|
|
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 | |
6、全部堆叠条形图
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.
| Note |
|---|
|
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 |
| Note |
|---|
|
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);
}
|
| Show Me |
|---|
|
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 | |
7、全堆折线图
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.
| Note |
|---|
|
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 |
| Note |
|---|
|
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 | |
8、全堆积样条面积图表
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.
| Note |
|---|
|
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 |
| Note |
|---|
|
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);
}
|