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