彩票走势图

WPF图表控件Chart FX使用方法系列:创建Bullet图表(附源码和示例)

原创|使用教程|编辑:郝浩|2013-03-04 13:57:26.000|阅读 1818 次

概述: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>

得到的效果如下:

WPF图表控件Chart FX使用方法系列:创建Bullet图表

通过对齐方式,我们可以进行数据视图的延伸,同时即将添加的标题也将会增加表单的效果。新的 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>

WPF图表控件Chart FX使用方法系列:创建Bullet图表

    你可以使用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>

WPF图表控件Chart FX使用方法系列:创建Bullet图表   WPF图表控件Chart FX使用方法系列:创建Bullet图表


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP