Visifire Silverlight Chart 比 Silverlight Toolkit Chart 好的兩點

最新推荐文章于 2020-01-09 08:32:51 发布

weixin_30883271

最新推荐文章于 2020-01-09 08:32:51 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/davidzhou/archive/2010/04/30/1724850.html

版权

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的組件名稱。如圖：

1 < 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 
2          < vc:Chart Grid.Row = " 0 " Name = " chtChartOne " >
3              < vc:Chart.AxesY >
4                  
5                  < vc:Axis  Interval = " 20 " Suffix = " % " />
6              </ vc:Chart.AxesY >
7          </ vc:Chart >
8
9          
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 ,但我還是想說太垃圾了！