在今天的文中，將會分享一下如何在WPF圖表控件Chart FX for WPF中創建有地圖的條形圖表，下面是第一次嘗試在條形圖中顯示圖像：

<cfx:Chart Gallery="Bar">
  <cfx:Chart.Series>
    <cfx:SeriesAttributes/>
  </cfx:Chart.Series>
  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.Template>
        <DataTemplate>
          <Canvas>
            <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}">
              <Rectangle.Fill>
                <ImageBrush ImageSource="C:\Temp\WorldMap.png"/>
              </Rectangle.Fill>
            </Rectangle>
          </Canvas>
        </DataTemplate>
      </cfx:AllSeriesAttributes.Template>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>
</cfx:Chart>

    我們將綁定這個矩形條的寬度和高度都我們創建的邏輯上的項目的寬度和高度上去，值得注意的是，我們并不擔心左邊和頂部，因為這些都將會在內部進行處理。現在我們正打算創建一個畫布，因為將會在里面添加更多的元素，下面就是我們所得到的效果：

    顯然這不是我們想要的效果，實際上在WPF的圖表中也沒有這個功能去畫矩形，尤其是ImageBrush / DrawingBrush的“region”。即使我們嘗試設置Stretch到UniformToFill，也只可以讓條形顯示一部分。 這個想法主要是想要確保所有的條形在完整的圖形區域中實際根據條形幾何繪制位圖。我們的邏輯項目支持PlotWidth 和PlotHeight，這樣的話就會返回完整的繪制區域的面積，但是由于我們的畫布會自動轉移到條形的位置，所以就取消了這個操作，我們的邏輯項目排列在左邊和頂部，所以需要創建一個簡單的轉換器：

public class NegateConverter : IValueConverter
{
    object IValueConverter.Convert (object value, Type targetType,
                                    object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }

    object IValueConverter.ConvertBack (object value, Type targetType,
                                        object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }
}

修改我們的模板如下：

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

    同時設置了這個矩形的Clip屬性到我們邏輯項目后的一個新的屬性中，這樣的話就會返回一個幾何形狀，使用這個需要用到ChartFX創建3488或更厚，這樣就會更加接近于我們的外觀。

    在這里還需要修改一些設計增量，首先添加為每個條形添加一個陰影效果。

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}"
                      Fill="#404040" Stroke="#404040"
                      StrokeThickness="{Binding Path=StrokeThickness}">
      <Rectangle.BitmapEffect>
        <DropShadowBitmapEffect/>
      </Rectangle.BitmapEffect>
    </Rectangle>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

    如果將上述中的3個值設置小于20，你將看不見大部分地圖，甚至會失去這個效果，在這里就可以在繪圖區域中使用相同的位圖。

<cfx:Chart.PlotArea>
  <cfx:PlotAreaAttributes>
    <cfx:PlotAreaAttributes.Background>
      <ImageBrush Opacity="0.35" Stretch="UniformToFill"
                           ImageSource="C:\Temp\WorldMap.png" />
    </cfx:PlotAreaAttributes.Background>
  </cfx:PlotAreaAttributes>
</cfx:Chart.PlotArea>