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

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

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

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

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>

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

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

<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個值設(shè)置小于20，你將看不見大部分地圖，甚至?xí)ミ@個效果，在這里就可以在繪圖區(qū)域中使用相同的位圖。

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