C1Chart for WPF初级教程-类型。穿Prada的女王(下)

发布时间:2015/03/18 00:03 发布者:Alice

返回博客中心

类型。穿Prada的女王(下)

 

在本章的上半部分类型。穿Prada的女王(上),我们主要介绍了图表的类型,让你了解丰富多彩的C1Chart图表。

下面我们就开始深入介绍一些特殊的图表类型,并且结合DataSeries来介绍如何设置这些图标类型。最后再介绍一种复合图表。

 

Bubble Charts

下面的图是一个BubbleCharts气泡图,设置ChartType属性为Bubble,并且使用BubbleSeries。就可以简单的实现一个气泡图。

 
 
XAML代码:

<c1:C1Chart Name="c1Chart1" ChartType="Bubble" c1:BubbleOptions.MinSize="5,5" c1:BubbleOptions.MaxSize="30,30" c1:BubbleOptions.Scale="Area">

<c1:C1Chart.Data>
<c1:ChartData>
<c1:BubbleSeries Values="20 22 19 24 25" SizeValues="1 2 3 2 1" />
<c1:BubbleSeries Values="8 12 10 12 15" SizeValues="3 2 1 2 3"/>
</c1:ChartData>
</c1:C1Chart.Data>
</c1:C1Chart>

 

 

 

 

HighLowOpenClose Chart

HighLowOpenClose图表需要一个特定的data series对象类型,它是HighLowOpenCloseSeries在这种data series的类型中,每一个点对应一个时期(典型的是一天)和包含五个值:

•时间

•最初时期的价格(Open)

•结束时期的价格 (Close)

•一段时期中的最低价格 (Low)

•一段时期中的最高价格 (High)

将C1Chart的ChartType设置为HighLowOpenClose,并且设置特定的数据,就可以得到如下图所示的图表:

 
XAML代码:
<c1:C1Chart ChartType="HighLowOpenClose">
<c1:C1Chart.Data>
<c1:ChartData>
<c1:HighLowOpenCloseSeries XValues="1 2 3 4 5" HighValues="103 105 107 102 99" LowValues="100 99 101 98 97" OpenValues="100 100 105 100 99" CloseValues="102 103 103 99 98"/>
</c1:ChartData>
</c1:C1Chart.Data>
</c1:C1Chart>

 

 

 

 

 

复合图表

如果我们需要在一个图表中显示不同类型的图表,使用XAML标记或是代码,可以创建复合图表类型。

如果我们要自动的添加一个Column series和一个Line series,可以使用代码或是XAML标记如下。

XAML代码:
<c1:C1Chart.Data>
<c1:ChartData>
<c1:ChartData.ItemsSource>
<PointCollection>
<Point X="1" Y="1" />
<Point X="2" Y="2" />
<Point X="3" Y="3" />
</PointCollection>
</c1:ChartData.ItemsSource>
<c1:XYDataSeries ChartType="Column" Label="Column" XValueBinding="{Binding X}" ValueBinding="{Binding Y}"/>
<c1:XYDataSeries ChartType="Line" Label="Line" XValueBinding="{Binding X}" ValueBinding="{Binding Y}"/>
</c1:ChartData>
</c1:C1Chart.Data>
 
 
 
C#代码:
c1Chart1.Data.Children.Add(new XYDataSeries()
{
ChartType = ChartType.Column,
XValuesSource = new double[] { 1, 2, 3 },
ValuesSource = new double[] { 1, 2, 3 }
);
c1Chart1.Data.Children.Add(new XYDataSeries()
{
ChartType = ChartType.Line,
XValuesSource = new double[] { 1, 2, 3 },
ValuesSource = new double[] { 3, 2, 1 }
); 

 

效果如下所示:

Image23

 

 

 

 

Chart Data Series样式

如果我们将LineSeries的类型改为LineSymbols,它就可以变成点线的样式。

现在我们需要对图中的柱子颜色或是线型颜色进行更改,可以设置Series的Symbol和Connection的相关属性。

在DataSeries类中的Symbol,Connection和ConnectionArea,这些属性可以根据图表类型,改变图表的不同部分的样式。

Symbol属性决定了画在每一个数据点的符号的形状,大小,边缘和填充。应用到展示符号的图表类型,包括Line,Area和XYPlot。Symbol属性也控件Bar和Column图表的bars的样式。

Connection属性决定了数据点之间画的线的边缘和填充。应用到data series点的集合。对于Line图表来说,connection是连接点间的线,对Area图表来说,connection是在数据点下的包含外线的区域。

设置LineSymbols的SymbolMarker属性,就可以改变线的圆点的样式。

效果如下所示:

Image24

 

你可以在下面下载示例,示例中有XAML和C#代码。

C1Chart_WPF_2.zip (9.01 kb)

 

第二章内容到此结束,感兴趣的同学请跟我学习下一章的内容,继续揭开C1Chart的神秘面纱。

 

 

C1Chart的在线英文产品文档���址:

http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm

如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html

 

C1Chart for WPF初级教程》系列文章

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网