Visifire Silverlight Chart 比 Silverlight Toolkit Chart 好的兩點

Visifire Silverlight Chart 比 Silverlight Toolkit Chart 好的兩點

1.      前言

昨天猶如項目需要，要求Silverlight 的多個Chart(樹列圖) ，Y標尺比例必須一致。還有必須在每欄的最上方顯示值。所需功能如下圖：

就是這兩個需求，卻耽誤了我不少時間，在Silverlight Toolkit Control 之 Chart 找了半天，卻沒有找到任何屬性能夠設置這兩個功能(如果有高人找到，請指教。先謝謝！)，我就想。。。 如果沒有屬性可設置，那可能可以用某些我不知道的技巧來實現此需求。但是猶如這個項目，非常趕時間。如果我還去對還是迷的問題研究的話。那可能有點得不嘗失。以前我有看到一個不錯的免費開源Silverlight Chart 組件 叫Visifire 出的Silverlight & WPF Charts . 這個組件貌似可以很簡單實現這兩個功能，而且又是開源而免費的。索性我就更換所有Silverlight Toolkit Control 之 Chart 組件。用Visifire這套的。用了之後我就覺得Silverlight Toolkit Control 之 Chart 真的太弱了！！Microsoft 真的很遜。

2.      描述

解決兩個問題

1.      多個Chart(樹列圖) ，Y標尺比例必須一致

2.      顯示每份統計資料的值，在最上方。

3.      過程

1.      引人Visifire的Silverlight & WPF Charts  Dll，這個我不要多廢話了啦，就放個圖吧！ （Visifire官方下載）

2.      XAML 頁面聲明Visifire的Silverlight & WPF Charts的組件名稱。如圖：

 

 <UserControl x:Class="OLAPSLDemo.SLV.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
5     mc:Ignorable="d" 
6     xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"   
7     d:DesignWidth="640" d:DesignHeight="480">
8     <Grid x:Name="LayoutRoot" Background="White">

 

3.      創建一個樹條圖

 

 1  <!--第一個Chart-->
 2         <vc:Chart Grid.Row="0" Name="chtChartOne">
 3             <vc:Chart.AxesY>
 4                 <!--Y間隔-->
 5                 <vc:Axis  Interval="20" Suffix="%"/>
 6             </vc:Chart.AxesY>
 7         </vc:Chart>
 8 
 9         <!--第二個Chart-->
10         <vc:Chart Grid.Row="1" Name="chtChartTwo">
11             <vc:Chart.AxesY>
12                 <vc:Axis  Interval="20" Suffix="%"/>
13             </vc:Chart.AxesY>
14             <vc:Chart.Series>
15                 <vc:DataSeries RenderAs="Column" LabelEnabled="true" LabelStyle="OutSide">
16                     <vc:DataSeries.DataPoints>
17                         <vc:DataPoint AxisXLabel="18-29歲" YValue="31.2"/>
18                         <vc:DataPoint AxisXLabel="30-39歲" YValue="50.3"/>
19                         <vc:DataPoint AxisXLabel="40-49歲" YValue="50.9"/>
20                         <vc:DataPoint AxisXLabel="50-64歲" YValue="35.6"/>
21                         <vc:DataPoint AxisXLabel="65歲以上"  YValue="27.6"/>
22                     </vc:DataSeries.DataPoints>
23                 </vc:DataSeries>
24             </vc:Chart.Series>
25         </vc:Chart>

其中<vc:Axis Interval="20" Suffix="%"/>中的，Interval屬性：就是解決本篇文章的第一個，Interval 是設置Y 標尺統一間隔比例的。比喻設置成=”20” ，那麼就會出現“0   20 40 60 …. “

而 <vc:DataSeries RenderAs="Column" LabelEnabled="true" LegendStyle="Outside"> 中的 某些屬性就是解決第二個問題的，像LabelEnabled 就是是否顯示值，而LegendStyle 就是顯示在統計欄裡面還是外面。到這裡兩個問題完美解決！

另外附加動態長生統計資料代碼。如下：

 

 1   public partial class MainPage : UserControl
 2     {
 3         public MainPage()
 4         {
 5             InitializeComponent();
 6             InitPage();
 7         }
 8 
 9         public void InitPage()
10         {
11             //統計資料列
12             DataSeries ds = new DataSeries();
13             //統計圖類型
14             ds.RenderAs = RenderAs.Column;
15             //顯示Lable
16             ds.LabelStyle = LabelStyles.OutSide;
17             ds.LabelEnabled = true;
18             //欄
19             ds.DataPoints.Add(new DataPoint() { AxisXLabel = "18-29歲", YValue = 20.8 });
20             ds.DataPoints.Add(new DataPoint() { AxisXLabel = "30-39歲", YValue = 28.2 });
21             ds.DataPoints.Add(new DataPoint() { AxisXLabel = "40-49歲", YValue = 26.5 });
22             ds.DataPoints.Add(new DataPoint() { AxisXLabel = "50-64歲", YValue = 18.9 });
23             ds.DataPoints.Add(new DataPoint() { AxisXLabel = "65歲以上", YValue = 17.2 });
24             chtChartOne.Series.Add(ds); 
25         }
26     }

 

4.      原始碼下載地址 

4.      結論

Visifire 的Silverlight & WPF Charts 在免費開源的silverlight 組件它是無敵的！  Silverlight Toolkit Controls 之Chart 不敢恭維！ 太過膚淺，太過簡單！ 我不想用過激的話來評介Silverlight Toolkit Controls 之Chart ,但我還是想說太垃圾了！