原創|使用教程|編輯:郝浩|2013-03-04 13:57:26.000|閱讀 1868 次
概述:Bullet圖表可通過衡量標準(比如年收入的目標值)來比較業績,同時也可以選擇顯示質量范圍。本文通過源碼和示例來介紹如何在Chat FX for WPF中創建Bullet圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
Bullet圖表可通過衡量標準(例如說年收入的目標值)來比較業績,同時也可以選擇顯示質量范圍。下面的來看看實現如何在Chart FX for WPF中創建Bullet圖表,具體實現的代碼如下:
如果說想要繪制去年的累計收入,現在至少需要2個系列,可以使用以下的代碼實現:
<cfx:Chart Style="{x:Static cfxMotifs:Basic.Style}" FontFamily="Calibri" Palette="{x:Static cfx:Palettes.Monochrome}"> <cfx:Chart.AllSeries> <cfx:AllSeriesAttributes> <cfx:AllSeriesAttributes.GalleryAttributes> <cfxBullet:Bullet/> </cfx:AllSeriesAttributes.GalleryAttributes> </cfx:AllSeriesAttributes> </cfx:Chart.AllSeries> <cfx:Chart.ItemsSource> <Binding Source="{StaticResource MyData}" XPath="BulletData/BulletPoint" /> </cfx:Chart.ItemsSource> <cfx:Chart.Series> <cfx:SeriesAttributesCollection> <cfx:SeriesAttributes BindingPath="@ActualRevenue" Content="Actual"/> <cfx:SeriesAttributes BindingPath="@TargetRevenue" Content="Target"/> </cfx:SeriesAttributesCollection> </cfx:Chart.Series> <cfx:Chart.AxisX> <cfx:Axis Foreground="Black"> <cfx:Axis.Labels> <cfx:AxisLabelAttributes BindingPath="@Region"/> </cfx:Axis.Labels> <cfx:Axis.Grids> <cfx:Grids> <cfx:Grids.Major> <cfx:GridLine Visibility="Collapsed" TickMark="None"/> </cfx:Grids.Major> </cfx:Grids> </cfx:Axis.Grids> <cfx:Axis.Line> <cfx:LineAttributes Visibility="Collapsed"/> </cfx:Axis.Line> </cfx:Axis> </cfx:Chart.AxisX> <cfx:Chart.AxisY> <cfx:Axis> <cfx:Axis.Grids> <cfx:Grids> <cfx:Grids.Major> <cfx:GridLine Visibility="Collapsed"/> </cfx:Grids.Major> </cfx:Grids> </cfx:Axis.Grids> </cfx:Axis> </cfx:Chart.AxisY> <cfx:Chart.PlotArea> <cfx:PlotAreaAttributes AxesStyle="Math" ClipToBounds="False"/> </cfx:Chart.PlotArea> <cfx:Chart.LegendBox> <cfx:LegendBox Visibility="Collapsed"/> <cfx:Chart.LegendBox> <cfx:Chart.Titles> <cfx:Title HorizontalAlignment="Left" cfxControls:SpacingDockPanel.AlignToPlotArea="False" FontWeight="Bold" FontSize="32" Margin="12,0,0,6"> Revenue YTD </cfx:Title> </cfx:Chart.Titles> </cfx:Chart>
得到的效果如下:
通過對齊方式,我們可以進行數據視圖的延伸,同時即將添加的標題也將會增加表單的效果。新的 AlignToMarkers 屬性,則可以確保數據視圖中的值將會都在繪圖區里面,這意味著數據視圖的標題將會在繪圖區域之外。
<cfx:Chart.DataView> <cfx:DataView DockBorder="None" DockPanel.Dock="Right" Visibility="Visible" Background="Transparent" VerticalAlignment="Stretch" AlignToMarkers="True"> <cfx:DataView.Points> <cfx:DataViewItemAttributes> <cfx:DataViewItemAttributes.GridLines> <cfx:GridLine Visibility="Collapsed"/> </cfx:DataViewItemAttributes.GridLines> </cfx:DataViewItemAttributes> </cfx:DataView.Points> <cfx:DataView.Fields> <cfx:DataViewFieldAttributes> <cfx:DataViewFieldAttributes.GridLines> <cfx:GridLine Visibility="Collapsed"/> </cfx:DataViewFieldAttributes.GridLines> <cfx:DataViewFieldAttributes.Headers> <cfx:FieldHeaderAttributes Visibility="Visible" Background="Transparent"/> </cfx:DataViewFieldAttributes.Headers> <cfx:DataViewFieldAttributes.Items> <cfx:SeriesField SeriesIndex="0" MarkerVisibility="Collapsed"/> <cfx:SeriesField SeriesIndex="1" MarkerVisibility="Collapsed"/> </cfx:DataViewFieldAttributes.Items> </cfx:DataViewFieldAttributes> </cfx:DataView.Fields> </cfx:DataView> </cfx:Chart.DataView> <cfx:Chart.Titles> <cfx:Title HorizontalAlignment="Left" cfxControls:SpacingDockPanel.AlignToPlotArea="False" FontWeight="Bold" FontSize="32" Margin="12,0,0,6"> Revenue YTD </cfx:Title> <cfx:Title HorizontalAlignment="Left">Actual vs. Target</cfx:Title> </cfx:Chart.Titles>
你可以使用Bullet 類公開的Sections屬性來顯示范圍,。值得注意的是,現在我們想要的這三個部分將會需要5個系列才可以進行相應的圖表的設置。這三個組可用的空間默認的是75%,然而在首次應用中,即使你SectionVolume 設置為100,也會存在一些差異,除非你設置AllSeries.Volume 為100。
<cfxBullet:Bullet Sections="3" SectionVolume="100" TargetVolume="80" ActualVolume="50" /> <cfx:Chart.Series> <cfx:SeriesAttributesCollection> <cfx:SeriesAttributes BindingPath="@ActualRevenue" Content="Actual"/> <cfx:SeriesAttributes BindingPath="@TargetRevenue" Content="Target"/> <cfx:SeriesAttributes BindingPath="@Bad"/> <cfx:SeriesAttributes BindingPath="@Satisfactory"/> <cfx:SeriesAttributes BindingPath="@Good"/> </cfx:SeriesAttributesCollection> </cfx:Chart.Series>
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件