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的組件名稱。如圖:
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. 創建一個樹條圖
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 就是顯示在統計欄裡面還是外面。到這裡兩個問題完美解決!
另外附加動態長生統計資料代碼。如下:
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 ,但我還是想說太垃圾了!
衷心感谢打赏者的厚爱与支持!也感谢点赞和评论的园友的支持!谢谢!打赏时您可以备注或联系告知我您希望下方出现的打赏者格式! | |||
---|---|---|---|
打赏者 | 打赏金额 | 打赏次数 | 打赏日期 |
dotnet的诱惑 | 2.00 | 1 | 2016-04-11 |
鬼脚君 | 5.00 | 1 | 2016-04-24 |