<ComponentOne Studio for WPF下載>

在上文中，我們介紹了您感興趣的C1Chart，從最基本的引用和添加到它的組成部分講起。在本文中，我們將為您介紹介紹每一個(gè)組成部分，應(yīng)該如何使用C#和XAML代碼添加。

類型

C1Chart有很多的類型，具體我們將在今后的教程中做介紹。就本文來講，使用的是C1Chart的Column類型。從代碼層面，該類型的設(shè)置方法如下：

XAML代碼：

在"c1chart:C1Chart"標(biāo)記里，使用XAML代碼設(shè)置ChartType屬性為Column。

C#代碼：

相應(yīng)的，在cs文件里，通過C#代碼也可以達(dá)到同樣的效果，代碼參考：

c1Chart1.ChartType = ChartType.Column;

數(shù)據(jù)

為了在圖表上顯示一組或多組數(shù)據(jù)，需要添加一個(gè)或多個(gè)data series到chart.Data.Children集合。比如本圖中共有Revenue、Expense和Profit三組數(shù)據(jù)，因此添加三個(gè)data series到chart.Data.Children。如果數(shù)據(jù)包含唯一的數(shù)字類型的值，比如本圖所示在Y軸是數(shù)字類型的值，那么就可以使用標(biāo)準(zhǔn)的DataSeries類。如果數(shù)據(jù)包含兩組數(shù)字值（X和Y軸），那么就是用XYDataSeries類替代。

給C1Chart添加數(shù)據(jù)可以使用XAML代碼或是C#代碼。

XAML代碼：

<c1:C1Chart.Data>

<c1:ChartData ItemNames="North East West South">

<c1:DataSeries Label="Revenue" RenderMode="Default" Values="1200 1250 400 1450"/>

<c1:DataSeries Label="Expense" RenderMode="Default" Values="400 300 300 200"/>

<c1:DataSeries Label="Profit" RenderMode="Default" Values="800 950 150 1250"/>

</c1:ChartData>

</c1:C1Chart.Data>

C#代碼：

// Clear previous data
c1Chart1.Data.Children.Clear();

//Add item names
string[] names = new string[] { "North", "East", "West", "South" };
c1Chart1.Data.ItemNames = names;

//Add data
DataSeries ds1 = new DataSeries();
int[] yValue1 = { 1200, 1250, 400, 1450 };
ds1.Label = "Revenue";
ds1.ValuesSource = yValue1;
c1Chart1.Data.Children.Add(ds1);

DataSeries ds2 = new DataSeries();
int[] yValue2 = { 400, 300, 300, 200 };
ds2.Label = "Expense";
ds2.ValuesSource = yValue2;
c1Chart1.Data.Children.Add(ds2);

DataSeries ds3 = new DataSeries();
int[] yValue3 = { 800, 950, 150, 1250 };
ds3.Label = "Profit";
ds3.ValuesSource = yValue3;
c1Chart1.Data.Children.Add(ds3);

ItemNames屬性：用來設(shè)置Item的名稱。圖中每組數(shù)據(jù)都有4個(gè)相同的Item名稱，分別是："North East West South"。通過ChartData.ItemNames屬性就可以設(shè)置。

Label屬性：每個(gè)Data series下都有Label屬性，用來指定每一組數(shù)據(jù)的標(biāo)簽。

軸

C1Chart上有X軸和Y軸，如果想自定義軸，需要添加ChartView類。ChartView類代表包含數(shù)據(jù)和軸在內(nèi)的區(qū)域。

軸標(biāo)題：軸標(biāo)題不僅僅可以展示簡(jiǎn)單的文字，圖中所示的是使用TextBlock元素來展示X軸和Y軸的標(biāo)題。另外一旦添加了TextBlock元素，可以改變字體和文字的方向。

XAML代碼：

<c1:C1Chart.View>
<c1:ChartView>
<c1:ChartView.AxisX>
<c1:Axis>
<c1:Axis.Title>
<TextBlock Text="Region" FontSize="24" FontWeight="Bold" TextAlignment="Left"/>
</c1:Axis.Title>
</c1:Axis>
</c1:ChartView.AxisX>
<c1:ChartView.AxisY>
<c1:Axis AnnoFormat="n0">
<c1:Axis.Title>
<TextBlock Text="Amount($1000)" FontSize="24" FontWeight="Bold" TextAlignment="Center"/>
</c1:Axis.Title>
</c1:Axis>
</c1:ChartView.AxisY>
</c1:ChartView>
</c1:C1Chart.View>

AnnoFormat：可以給Y軸設(shè)置格式，比如上述代碼通過設(shè)置AnnoFormat為n0，設(shè)置Y軸的的數(shù)字包含千分號(hào)。這些對(duì)X軸和Y軸的設(shè)置，都可以寫在<c1chart:Axis></c1chart:Axis>標(biāo)記里。另外上述代碼也可以使用C#代碼，寫在cs文件里。

C#代碼：

c1Chart1.View.AxisX.Title = new TextBlock() { Text = "Region", FontSize = 24, FontWeight=FontWeights.Bold, TextAlignment = TextAlignment.Left };

c1Chart1.View.AxisY.Title = new TextBlock() { Text = "Amount($1000)", FontSize = 24, FontWeight = FontWeights.Bold, TextAlignment = TextAlignment.Center };
c1Chart1.View.AxisY.AnnoFormat = "n0";

GridLine

Gridline畫在C1Chart的一組水平或豎直方向的線。它能夠幫助你準(zhǔn)確的讀取圖表的值，查看接近線的值。可以使用MajorGridStroke/MinorGridStroke屬性來設(shè)置major/minor的線。線的粗細(xì)，顏色，線型都是可以設(shè)置的。圖中在<c1chart:Axis></c1chart:Axis>標(biāo)記里設(shè)置了MajorGridStrokeThickness為1。或是在cs文件里通過C#代碼實(shí)現(xiàn)：

c1Chart1.View.AxisX.MajorGridStrokeThickness = 1;

c1Chart1.View.AxisY.MajorGridStrokeThickness = 1;

顏色

如果要調(diào)整Chart的顏色，有兩種方式：Theme和Palette屬性。Theme允許使用超過10種的內(nèi)置顏色方案。Palette屬性允許給data series設(shè)置特定的顏色，它內(nèi)置超過20種顏色，還可以進(jìn)行自定義。在XAML中，是將Palette="Solstice"寫在<c1:c1chart&gt;<c1:c1chart>標(biāo)記內(nèi)。

C#代碼：

c1Chart1.Palette = ColorGeneration.Solstice;

這時(shí)不管通過C#代碼或是XAML代碼我們都可以得到如下圖所示的圖表：

如果更改Theme，可以采用如下的代碼快速設(shè)置：

// Set theme
c1Chart.Theme = _c1Chart.TryFindResource(new ComponentResourceKey(typeof(C1.WPF.C1Chart.C1Chart),"Office2007Black")) as ResourceDictionary;}

本文示例下載：

PS: 關(guān)于ComponentOne，這些產(chǎn)品你可以關(guān)注>>

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品新年大促，驚喜折扣禮品送不停！優(yōu)惠詳情點(diǎn)擊查看>>