<ComponentOne Studio for WPF下載>

本文我們就來逐步介紹如何將C1Chart綁定到XML數(shù)據(jù)源。在XAML頁面下有一個XML數(shù)據(jù)源，我們需要將C1Chart控件綁定到xml數(shù)據(jù)。數(shù)據(jù)展示了一個簡單的bar圖表信息，有一個Y軸代表城市的名稱，和X軸代表每一個國家的統(tǒng)計。圖表使用一個系列來畫統(tǒng)計數(shù)據(jù)。一個legend用來展示統(tǒng)計顏色。在本文中用到的最主要的綁定是使用在XAML代碼中的ChartData類。綁定C1Chart到xml的步驟如下：

第一步

在VisualStudio里創(chuàng)建WPF工程，更多的初始化的信息。

第二步

在Window頁面創(chuàng)建一個資源部分，然后添加xml數(shù)據(jù)提供者。在資源部分直接插入xml數(shù)據(jù)。xml數(shù)據(jù)必須在&ldquo;x:Xdata”內(nèi)，而且有一個單一個的根節(jié)點。在本例中，這個根節(jié)點市Cities。

<Grid.Resources> <XmlDataProvider x:Key="data" XPath="Cities/City"> <x:XData> <Cities xmlns=""> <City> <CityName>Mumbai</CityName> <Population>13000000</Population> </City> <City> <CityName>Karachi</CityName> <Population>11600000</Population> </City> <City> <CityName>Delhi</CityName> <Population>11500000</Population> </City> <City> <CityName>Isanbul</CityName> <Population>11200000</Population> </City> </Cities> </x:XData> </XmlDataProvider> </Grid.Resources>

第三步

給工程添加C1.WPF.C1Chart引用，并且添加C1Chart到Window頁面。

第四步

改變C1Chart的類型為Bar（ChartType=Bar）。

第五步

在“c1chart:C1Chart.Data”標(biāo)簽里給ChartData添加ItemNameBinding屬性，指定元素的名稱。在本例中，就是在y軸的標(biāo)簽。在DataSeries 里添加ValueBinding屬性，指定序列的數(shù)值。如下的示例使用綁定擴張綁定了ChartData.ItemsSource屬性，用來指定資源。ChartData.ItemNameBinding屬性使用綁定擴展來指定路徑。DataSeries.Label屬性使用綁定擴展指定數(shù)據(jù)統(tǒng)計的路徑。XAML代碼如下：

<c1:C1Chart Height="300" HorizontalAlignment="Left" Margin="0" Name="c1Chart1" ChartType="Bar" VerticalAlignment="Top" Width="600"> <c1:C1Chart.Data> <c1:ChartData ItemsSource="{Binding Source={StaticResource data}}" ItemNameBinding="{Binding XPath=CityName}"> <c1:DataSeries Label="Population" ValueBinding="{Binding XPath=Population}" /> </c1:ChartData> </c1:C1Chart.Data> <c1:Legend DockPanel.Dock="Right" /> </c1:C1Chart>

第六步

運行工程，保證程序的正確性。圖表如下所示：

第七步

改變圖表的樣式。在C1Chart的ChartView.AxisX屬性中，我們需要設(shè)置x軸的數(shù)字顯示格式，這要通過annotation，這樣數(shù)據(jù)可以用千位符分割。如下的代碼展示這個功能。另外可以使用MajorGridStroke/MinorGridStroke屬性來設(shè)置major/minor的線。同樣的，可以在上面鏈接的文章中找到如何給系列更改顏色，比如這個例子，設(shè)置Palette=&quot;Civic"來更改系列的顏色。最后的效果如下圖所示：

本文示例：

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

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品惠風(fēng)迎春，驚喜折扣禮品送不停！優(yōu)惠詳情點擊查看>>