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

    在上一篇文章《使用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>

效果以下：

如今来看看怎么样在最大值上记性标记呢？具体代码以下：

<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>

    若是说想要显示每一个图表最后一个值的点标签的话，咱们能够使用相同的类，将其绑定到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>