本章节介绍一些基本图表类型的一般用法,这些类型包括 Bar, Pie, 和 X-Y Plot.同时也为每一种图表类型提供了示例代码.示例都是简洁和明了的,同时重点关注的是每一种图表类型的主
要方面.本章节中大多数示例程序使用的图表数据都在 Nwind.mdb文件中,该文件在Winforms图表安装过程中被创建.另外在发布包中含有其它很多复杂的示例,这些示例程序包含了在快速入门中没有介绍的高级用法.

简单条形图表

使用图表来展示一系列简单数值的场景是很常见的,例如展示产品价格.这种类型的图表是非常有用的.因为它以一个快速高效的方式展示了各个值之间的相对量.
这种类型图表的主要特征是每一个数据点仅表达了一个价格的信息.当创建这些图表时,将要被展示的值被赋给序列的每一个 Y值上.Y 值仅提供了点之间的固定间隔,并且经常显示在每一个数据点附加的标签上.
展示这种信息时推荐使用的图表类型是条形图和饼状图这两种图表类型.
下图展示了一个简单的显示产品价格的条形图表(NorthWind 产品列表中的饮料产品)
请注意条状图是水平显示的,这是为了给显示在轴线上的产品名字留够展示的空间.这个效果通过使用 Inverted 属性完成.
下面的代码创建了上述的条形图.使用的数据的来源是 NorthWind 产品列表中的 Beverages 表中的内容,可以在 C:\Program Files\ComponentOne\Studio for Winforms\Common 文件夹中找到它.在实际的应用程序中,代码可能比示例中的更加简洁,因为一些属性可以在设计时设置.

Visual Basic

' get chart data
Dim data As DataView = _dataSet.Tables("Products").DefaultView data.Sort = "UnitPrice"
data.RowFilter = "CategoryID = 1" ' beverages
' configure the chart
C1Chart1.Reset()
C1Chart1.ChartArea.Inverted = true
C1Chart1.ChartGroups(0).ChartType = Chart2DTypeEnum.Bar
' create single series for product price
Dim dscoll As ChartDataSeriesCollection =
C1Chart1.ChartGroups(0).ChartData.SeriesList dscoll.Clear()
Dim series As ChartDataSeries = dscoll.AddNewSeries() series.Label = "Product Prices"
' populate the series
series.PointData.Length = data.Count
Dim i As Integer
For i = 0 To data.Count – 1 series.X = I
series.Y = data("UnitPrice")
Next I
' attach product names to x-axis
Dim ax As Axis = C1Chart1.ChartArea.AxisX ax.AnnoMethod = AnnotationMethodEnum.ValueLabels For i = 0 To data.Count – 1
ax.ValueLabels.Add(i, CType(data("ProductName"), String)) Next I
' configure y-axis
Dim ay As Axis = C1Chart1.ChartArea.AxisY ay.AnnoFormat = FormatEnum.NumericCurrency

C#

// get chart data

DataView data = _dataSet.Tables["Products"].DefaultView; data.Sort = "UnitPrice";

data.RowFilter = "CategoryID = 1"; // beverages
// configure the chart c1Chart1.Reset();
c1Chart1.ChartArea.Inverted = true;

c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Bar;

// create single series for product price

ChartDataSeriesCollection dscoll = c1Chart1.ChartGroups[0].ChartData.SeriesList; dscoll.Clear();

ChartDataSeries series = dscoll.AddNewSeries(); series.Label = "Product Prices";
// populate the series
series.PointData.Length = data.Count; for (int i = 0; i < data.Count; i++)
{

series.X[i] = i;

series.Y[i] = data[i]["UnitPrice"];

}
// attach product names to x-axis Axis ax = c1Chart1.ChartArea.AxisX;
ax.AnnoMethod = AnnotationMethodEnum.ValueLabels; for (int i = 0; i < data.Count; i++)

ax.ValueLabels.Add(i, (string)data[i]["ProductName"]);

// configure y-axis
Axis ay = c1Chart1.ChartArea.AxisY; ay.AnnoFormat = FormatEnum.NumericCurrency;

在一个图表中展示多于一个的数据序列的场景是很常见的,使用 C1Chart 可以很容易地做到这一点.而且代码可能很类似于上述的代码,除了您可能需要在 ChartDataSeriesCollection 中添加一个附件的列表之外.

拥有两个 Y 轴线的条形图表

有一种不太常见的场景,在一个单独的图表中使用不同的单位和缩放来显示序列.例如,您可能需要在一个单独的图表中同时展示产品价格和库存量.为了做到这一点,您需要使用第二个Y轴线.主要的轴线用来显式价格(现金单位),次要的轴线用来显示数量.
为了展示用于第二个Y轴线显示的数据,添加一个新的序列到第二个图表组中(请注意每一个
C1Chart 含有两个图表组),您可以在第二个图表组中使用一个不同的数据类型,来让图表变得更加的清晰.
例如,下面的图表含有三个序列,第一个展示了产品单位价格(作为条状图,展示在主要 Y 轴线上),其余的部分展示了仓库中的数量和重新订货标准(作为符号,展示在次要 Y 轴线上).

创建第二个图表的代码的开始部分与创建第一个图表的开始部分的步骤是一样的.两个额外
的序列, Units in Stock 和 Reorder Level,是使用以下的代码创建的.

Visual Basic

' label Y-axis and show legend
C1Chart1.Legend.Visible = True
C1Chart1.ChartArea.AxisY.Text = "Prices (in US$)"
C1Chart1.ChartArea.AxisY2.Text = "Unit Count"
' create two series for units in stock and reorder level ' (these are plotted against the secondary Y axis) dscoll = C1Chart1.ChartGroups(1).ChartData.SeriesList dscoll.Clear() ' units in stock
series = dscoll.AddNewSeries() series.Label = "Units In Stock" series.SymbolStyle.Color = Color.Green series.LineStyle.Pattern = LinePatternEnum.None series.PointData.Length = data.Count For i = 0 To data.Count – 1 series.X = I
series.Y = data("UnitsInStock")
Next I
' reorder level
series = dscoll.AddNewSeries() series.Label = "Reorder Level" series.SymbolStyle.Color = Color.Red
series.LineStyle.Pattern = LinePatternEnum.None series.PointData.Length = data.Count For i = 0 To data.Count – 1 series.X = I
series.Y = data("ReorderLevel")
Next I
' show gridlines for secondary Y-axis
C1Chart1.ChartArea.AxisY2.GridMajor.Visible = True

C#

// label Y-axis and show legend
_c1c.Legend.Visible = true;
_c1c.ChartArea.AxisY.Text = "Prices (in US$)";
_c1c.ChartArea.AxisY2.Text = "Unit Count";

// create two series for units in stock and reorder level // (these are plotted against the secondary Y axis) dscoll = _c1c.ChartGroups[1].ChartData.SeriesList; dscoll.Clear(); // units in stock

series = dscoll.AddNewSeries(); series.Label = "Units In Stock"; series.SymbolStyle.Color = Color.Green; series.LineStyle.Pattern = LinePatternEnum.None; series.PointData.Length = data.Count; for (int i = 0; i < data.Count; i++)
{

series.X[i] = i;

series.Y[i] = data[i]["UnitsInStock"];

}
// reorder level
series = dscoll.AddNewSeries(); series.Label = "Reorder Level"; series.SymbolStyle.Color = Color.Red;
series.LineStyle.Pattern = LinePatternEnum.None; series.PointData.Length = data.Count; for (int i = 0; i < data.Count; i++)
{

series.X[i] = i;

series.Y[i] = data[i]["ReorderLevel"];

}
// show gridlines for secondary Y-axis
_c1c.ChartArea.AxisY2.GridMajor.Visible = true;

饼状图表

饼状图表一般用来展示简单值.它们在视觉上很有吸引力,并且经常被附加上 3D 效果,例如阴影和旋转.C1Chart 允许您给图表添加 3D 效果.但是您必须小心使用,因为它们可能会使数据失
真.
饼状图表跟其它的 C1Chart 图表类型有一个最显著的区别:在饼状图表中,一个饼状图的切片代表一个数据序列.所以,您将不会遇见只含有一个序列的饼状图(这样的话饼状图只会含有一个切片).在最常见的场景下,饼状图含有多个序列(一个切片对应一个序列),且每一个序列含有一个单独的数据点.C1Chart 在图表中通过多个切片来展示有多个数据点的序列.
当您思考用于标注每一个序列的标签和如果想要在图表图例中展示它们时需要注意这一个特征.以下的图表展示了在一个饼状图表中展示与之前相同的销售数据.

用来创建这个图表的代码跟创建条状图表的代码有明显的不同.它为每一个值创建了一个序
列.每一个序列只含有一个单独的数据点.下面的代码展示了创建上述图表的步骤:

Visual Basic

' get chart data

Dim data As DataView = _dataSet.Tables["Products"].DefaultView data.Sort = "UnitPrice"

data.RowFilter = "CategoryID = 1" ' beverages
' configure chart
C1Chart1.Reset()
C1Chart1.BackColor = Color.White
C1Chart1.ChartArea.Style.Font = new Font("Tahoma", 8)
C1Chart1.ChartGroups(0).ChartType = Chart2DTypeEnum.Pie
' get series collection (pies have one series per slice)
Dim dscoll As ChartDataSeriesCollection =
C1Chart1.ChartGroups(0).ChartData.SeriesList dscoll.Clear()
' populate the series
Dim i As Integer
For i = 0 To data.Count – 1
Dim series As ChartDataSeries = dscoll.AddNewSeries() series.PointData.Length = 1 series.Y(0) = data

("UnitPrice")
series.Label = String.Format("{0} ({1:c})", _ data

("ProductName"), data

("UnitPrice"))
Next I
' show pie legend
C1Chart1.Legend.Visible = True
C1Chart1.Legend.Text = "Product Unit Prices"

C#

// get chart data

DataView data = _dataSet.Tables["Products"].DefaultView; data.Sort = "UnitPrice";

data.RowFilter = "CategoryID = 1"; // beverages
// configure chart c1Chart1.Reset();
c1Chart1.BackColor = Color.White;

c1Chart1.ChartArea.Style.Font = new Font("Tahoma", 8); c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Pie;

// get series collection (pies have one series per slice)

ChartDataSeriesCollection dscoll = c1Chart1.ChartGroups[0].ChartData.SeriesList; dscoll.Clear(); // populate the series

for (int i = 0; i < data.Count; i++)
{

ChartDataSeries series = dscoll.AddNewSeries(); series.PointData.Length = 1; series.Y[0] = data[i]["UnitPrice"]; series.Label = string.Format("{0} ({1:c})", data[i]["ProductName"], data[i]["UnitPrice"]);

}
// show pie legend
c1Chart1.Legend.Visible = true;
c1Chart1.Legend.Text = "Product Unit Prices";

带有图表标签的饼状图表

在一个饼状图表中显示数据序列的通常做法是使用一个图例,例如上一个例子.这种方法很管用,因为信息被显示在一个单独的区域中,无论您有多少个的标签,它们被隔离在在图例的旁边.
但是,在一些场景下,您可能希望将标签紧挨着数据点显示,以便让它们的关系更加的明显.您还可能希望在数据点上添加含有信息的标签或者其它的图表元素,并且在一个特定的位置或者紧挨着某个特定的图表元素来放置标签.对于这种类型的任务,C1Chart 提供了 ChartLabels 属性, 它让您创建 Label 对象并且将它们附加在任何的图表元素上.
例如,下面的图例展示了与前面的示例相同的饼状图表,这次给每一个切片上附加了标签而不是使用图例来表示它们.

这个图表也表明了一个常见的问题:当您附加了过多的图表标签时,他们可能会溢出,并且很难准确地定位它们,因为它们实在太多了(在本示例中,C1Chart 自动定位了标签).
创建这个图表的代码的开始部分和用于创建第一个饼状图表的步骤是一样的.标签是使用以
下的代码来创建的.

Visual Basic

' hide legend, configure labels
C1Chart1.Legend.Visible = false
Dim s As Style = C1Chart1.ChartLabels.DefaultLabelStyle
s.Font = new Font("Tahoma", 7)
s.BackColor = SystemColors.Info
s.Opaque = true
s.Border.BorderStyle = BorderStyleEnum.Solid
' attach labels to each slice
Dim i As Integer
For i = 0 To data.Count – 1
Dim lbl As C1.Win.C1Chart.Label = _
C1Chart1.ChartLabels.LabelsCollection.AddNewLabel() lbl.Text = string.Format("{0} ({1:c})", _ data("ProductName"), data("UnitPrice")) lbl.Compass = LabelCompassEnum.Radial lbl.Offset = 20 lbl.Connected = True lbl.Visible = True
lbl.AttachMethod = AttachMethodEnum.DataIndex Dim am As AttachMethodData = lbl.AttachMethodData am.GroupIndex = 0 am.SeriesIndex = I am.PointIndex = 0
Next i

C#

// hide legend, configure labels c1Chart1.Legend.Visible = false;
Style s = c1Chart1.ChartLabels.DefaultLabelStyle;
s.Font = new Font("Tahoma", 7);
s.BackColor = SystemColors.Info;
s.Opaque = true;
s.Border.BorderStyle = BorderStyleEnum.Solid; // attach labels to each slice for (int i = 0; i < data.Count; i++)
{
C1.Win.C1Chart.Label lbl =

c1Chart1.ChartLabels.LabelsCollection.AddNewLabel(); lbl.Text = string.Format("{0} ({1:c})", data[i]["ProductName"], data[i]["UnitPrice"]); lbl.Compass = LabelCompassEnum.Radial; lbl.Offset = 20; lbl.Connected = true; lbl.Visible = true;

lbl.AttachMethod = AttachMethodEnum.DataIndex; AttachMethodData am = lbl.AttachMethodData; am.GroupIndex = 0; am.SeriesIndex = i; am.PointIndex = 0;
}

XY-绘制(散点图)

条状图和饼状图使用一个单独的值来代表每一个数据点(价格,单位库存,或者重订货标准).相反地, XYPlot 使用两个值来代表一个数据点.这个特性在描述数据在两个维度上的关系时非常的有用,通常它被用于对数据进行统计分析.
例如,下图展示了一个 XYPlot 图表,它描述了产品单价和销量的关系.

这种类型的图表通常用来支持量化变量间的关系的统计技术(典型的是线性回归分析).例如, 上面的图表表明了一个单价在$250 以上的点跟其它点的距离相当的远.在一个线性回归中,这个点被称为"异常值",并会对分析的结果有更多更深远的影响,相对于其它的点.
XYPlot 图表本身也是非常有用的,它展示了关系的定性方面.例如,销量是否跟单价有关系? 在这个示例中,数据看上去确实有一个关系.可能客户喜欢在 NorthWind 中购买昂贵的产品,但是在它们当地的超市中喜欢购买便宜的产品.
下面的代码用来创建上面的示例图表.它跟创建条状图表的代码非常的类似.除了它需要设
置 X 和 Y 值到数据上,而不是为 X 值使用一个简单的序列来描述.

Visual Basic

' get chart data
Dim data As DataView = _dataSet.Tables("Sales").DefaultView data.Sort = "UnitPrice"
' configure chart
C1Chart1.Reset()
C1Chart1.ChartGroups(0).ChartType = Chart2DTypeEnum.XYPlot
' create single series for product price vs sales
Dim dscoll As ChartDataSeriesCollection = _ C1Chart1.ChartGroups(0).ChartData.SeriesList; dscoll.Clear();
Dim series As ChartDataSeries = dscoll.AddNewSeries()
' show symbols only (no lines) series.SymbolStyle.Color = Color.Green series.SymbolStyle.OutlineColor = Color.Black series.LineStyle.Pattern = LinePatternEnum.None
' populate the series
series.PointData.Length = data.Count
Dim i As Integer
For i = 0 To data.Count – 1 series.X = data("UnitPrice") series.Y = data("ProductSales")
Next I
' attach product names to x-axis
Dim ax As Axis = C1Chart1.ChartArea.AxisX ax.Text = "Unit Price (US$)"
ax.AnnoFormat = FormatEnum.NumericCurrency ax.GridMajor.Visible = True
' configure y-axis
Dim ay As Axis = C1Chart1.ChartArea.AxisY ay.Text = "Sales (thousand US$)" ay.AnnoFormat = FormatEnum.NumericManual ay.AnnoFormatString = "$#,##0," ay.GridMajor.Visible = True

C#

// get chart data

DataView data = _dataSet.Tables["Sales"].DefaultView; data.Sort = "UnitPrice"; // configure chart c1Chart1.Reset();

c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.XYPlot;

// create single series for product price vs sales ChartDataSeriesCollection

dscoll = c1Chart1.ChartGroups[0].ChartData.SeriesList; dscoll.Clear();

ChartDataSeries series = dscoll.AddNewSeries();
// show symbols only (no lines) series.SymbolStyle.Color = Color.Green; series.SymbolStyle.OutlineColor = Color.Black; series.LineStyle.Pattern = LinePatternEnum.None;
// populate the series
series.PointData.Length = data.Count; for (int i = 0; i < data.Count; i++)
{

series.X[i] = data[i]["UnitPrice"]; series.Y[i] = data[i]["ProductSales"];

}
// attach product names to x-axis Axis ax = c1Chart1.ChartArea.AxisX; ax.Text = "Unit Price (US$)";
ax.AnnoFormat = FormatEnum.NumericCurrency; ax.GridMajor.Visible = true;
// configure y-axis
Axis ay = c1Chart1.ChartArea.AxisY; ay.Text = "Sales (thousand US$)"; ay.AnnoFormat = FormatEnum.NumericManual; ay.AnnoFormatString = "$#,##0,"; ay.GridMajor.Visible = true;

Page tree

基本 2D 图表的一般用法

简单条形图表

拥有两个 Y 轴线的条形图表

饼状图表

带有图表标签的饼状图表

XY-绘制(散点图)