ChartConlrol二維圖表類型

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types

 

 

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
Area Chart	Line Chart	Radar Line Chart	Spline Area Chart
Bubble Chart	Overlapped Gantt Chart	Radar Point Chart	Spline Chart
Candle Stick Chart	Overlapped Range Bar Chart	Range Area Chart	Stacked Area Chart
Doughnut Chart	Pie Chart	Scatter Line Chart	Stacked Bar Chart
Full-Stacked Area Chart	Point Chart	Side-by-Side Bar Chart	Stacked Line Chart
Full-Stacked Bar Chart	Polar Area Chart	Side-by-Side Full-Stacked Bar Chart	Stacked Spline Area Chart
Full-Stacked Line Chart	Polar Line Chart	Side-by-Side Gantt Chart	Step Area Chart
Full-Stacked Spline Area Chart	Polar Point Chart	Side-by-Side Range Bar Chart	Step Line Chart
Funnel Chart	Radar Area Chart	Side-by-Side Stacked Bar Chart	Stock Chart

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:

Swift Plot

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

 

1. 面積圖

 

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Area Chart

Short Description

 

 

 

 

 

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，因此能夠被旋轉顯示爲橫型或豎型條形圖。

 

Chart Type Characteristics 圖表類型特性

 

 

 

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.

 

Example

 

 

 

 

 

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事件處理器。

Required Libraries

 

 

 

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.

 

 

C#   VB

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.

 

 

See Also

 

 

XY-Diagram

 

Bubble Chart

二、氣泡圖

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Bubble Chart

Short Description

 

 

 

 

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，能夠旋轉改變軸的位置。

 

Chart Type Characteristics

圖表類型特定

 

 

 

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.

 

Example

 

 

 

 

 

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.

 

C#   VB

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

 

三、燭臺圖表

 

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Candle Stick Chart

Short Description

 

 

 

 

 

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.

 

Chart Type Characteristics 圖表類型特色

 

 

 

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.

 

Example

 

 

 

 

 

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.

 

C#:Form1.cs   VB:Form1.vb

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

 

 

Financial Charting
XY-Diagram
Date-Time Data Representation
Indicators

 

 

 

Doughnut Chart

 

四、環形圖

 

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Doughnut Chart

Short Description

 

 

 

 

 

 

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.

 

Chart Type Characteristics 圖表類型特點

 

 

 

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.

 

Example 示例

 

 

 

 

 

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.

 

 

 

 

See Also

 

 

Simple Diagram

Full-Stacked Area Chart

五、全堆積面積圖

WinForms Controls > Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Full-Stacked Area Chart

Short Description

 

 

 

 

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. 若是一個序列既包含正數也包含負數的值，將被看作是正數序列，序列中的全部負值被當作零值。

 

Chart Type Characteristics

 

 

圖表類型特性

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.

 

Example

 

 

 

 

 

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.

 

 

 

 

 

See Also

 

 

XY-Diagram

Full-Stacked Bar Chart

六、所有堆疊條形圖

WinForms Controls >  Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Full-Stacked Bar Chart

Short Description

 

 

 

 

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.

 

Chart Type Characteristics

 

 

 

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.

 

Example

 

 

 

 

 

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.

 

 

 

 

 

See Also

 

 

XY-Diagram

Full-Stacked Line Chart

 

七、全堆折線圖

WinForms Controls >  Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Full-Stacked Line Chart

Short Description

 

 

 

 

 

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.

 

Chart Type Characteristics

 

 

 

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

八、全堆積樣條面積圖表

WinForms Controls >  Controls >  Chart Control >  Concepts >  Creating Charts >  2D Chart Types >  Full-Stacked Spline Area Chart

Short Description

 

 

 

 

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.

 

Chart Type Characteristics

 

 

 

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.

 

Example

 

 

 

 

 

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); }