使用Chart FX for WPF简化图表(二)

2013/11/25 13:32
阅读数 272

    在上一篇文章《使用Chart FX for WPF简化图表(一)》中实现了图表的简化,节省了大量的控件。在本次的文章中,我们将会增加新的功能到已经简化了的图表上。图表中所绘制的范围上有一个最大和最小值,如果想要在背景上绘制一个浅灰色的矩形,这个矩形使用这个最大值和最小值范围,并且和原来的图表进行重叠,这样的话,如果图表上有任何的值超出了范围,就可以很直观的看见。

    要实现上面的效果,现在有2个关键的问题,首先为了最小化空间,Y轴是不可见的,但是如果想要使用轴部分来展示这个范围,必须确保轴是可见的,但是要求没有任何的标签或是网格线。XAML需要隐藏网格和标签,像下面这样:

<cfx:Chart.AxisY>
  <cfx:Axis Separation="0">
    <cfx:Axis.Labels>
      <cfx:AxisLabelAttributes Visibility="Collapsed"/>
    </cfx:Axis.Labels>
    <cfx:Axis.Grids>
      <cfx:Grids>
        <cfx:Grids.Major>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Major>
        <cfx:Grids.Minor>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Minor>
      </cfx:Grids>
    </cfx:Axis.Grids>
  </cfx:Axis>
</cfx:Chart.AxisY>

    想要直观的隐藏网格线和标签,设置Separation为0 ,是最小化轴空间的关键。现在要创建一个轴部分,将设置每个产品的最小和最大之间的范围,所以会假设数据层类ProductInfo有2个额外的属性,分别为MinDownloads和MaxDownloads。

<cfx:Axis.Sections>
      <cfx:AxisSection From="{Binding Path=MinDownloads}"
                       To="{Binding Path=MaxDownloads}" Background="#A0A0A0" />
    </cfx:Axis.Sections>

效果如下:

Chart FX for WPF图表控件如何简化图表(二)

现在来看看怎么样在最大值上记性标记呢?具体代码如下:

<cfx:Chart.ConditionalAttributes>
    <cfx:ConditionalAttributes>
      <cfx:ConditionalAttributes.Condition>
        <cfx:MaximumValueCondition/>
      </cfx:ConditionalAttributes.Condition>
      <cfx:ConditionalAttributes.Marker>
        <cfx:MarkerAttributes Visibility="Visible" Fill="Red"
                              Size="6" Shape="Circle" />
      </cfx:ConditionalAttributes.Marker>
    </cfx:ConditionalAttributes>
  </cfx:Chart.ConditionalAttributes>

Chart FX for WPF图表控件如何简化图表(二)

    如果说想要显示每个图表最后一个值的点标签的话,我们可以使用相同的类,将其绑定到X值,代码如下:

<cfx:ConditionalAttributes>
        <cfx:ConditionalAttributes.Condition>
          <cfx:MaximumValueCondition BindingPath="X"/>
        </cfx:ConditionalAttributes.Condition>
        <cfx:ConditionalAttributes.PointLabels>
          <cfx:PointLabelAttributes Visibility="Visible" Offset="3,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" FontSize="7"/>
        </cfx:ConditionalAttributes.PointLabels>
      </cfx:ConditionalAttributes>
展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部