WPF绘制统计图

介绍Toolkit控件中的5种数据报表图，推荐给大家。本文基本上用的是google机器翻译，如果有哪不通顺，请指正  ：）

他们分别是：

• 柱状图报表
• 饼图报表
• 区域折线图报表
• 横向柱状图报表
• 折线图报表

以下是该控件的介绍，本文是翻译的国外大神的作品，分享出来，也方便自己日后的使用。

原文地址：http://www.codeproject.com/Articles/196502/WPF-Toolkit-Charting-Controls-Line-Bar-Area-Pie-Co

在阅读一下文章的之前，建议你先下载该示例的Demo，其实Demo里面的代码非常非常少。也许你都不用再往下看这个长篇大论…

so， 下载地址：WpfToolkitChart

Demo中包含了以上所述的5种报表控件

 

报表控件介绍

我目前正在对几个数据可视化的项目和正在使用WPF的大部分时间。图表控件是一个相关的统计和数据处理非常有用。 WPF工具包是免费的，开源的，但是就是因为其有限的图表支持使用较少。在我看来，这是非常有用的，容易使用。

在这里，我仅仅演示了基本的图表控件，并设置要显示的数据。对于未来与此相关的文章，我将演示WPF工具包的高级功能。

 

开始

WPF中的任何先验知识是必需的。你只需要知道的HTML（我敢肯定每个人，如今）。 XAML编码是蛮好玩的。

首先，我将提到的安装步骤，然后将嵌入编码XAML和相关的C＃文件为静态可视化的数据集。

 

第一步 – 安装WPF工具包

从这个站点上安装WPF工具包：

http://wpf.codeplex.com/releases/view/40535

（请在安装和使用说明这里所说的。）

添加新的WPF应用程序在Visual Studio。

如果您无法看到在工具箱图表控件，右键单击工具箱，然后选择选择项。然后点击WPF组件，并选择图表控件（在标题中提到的那些）。这将控件添加到您的工具箱，你应该能够将其拖放在XAML形式。

 

第二个步骤 – XAML编码图表控件

XAML（可扩展应用程序标记语言）是一种标记语言，用于声明性应用程序编程。如果您有兴趣了解更多有关XAML，请参阅MSDN文档在http://msdn.microsoft.com/en-us/library/ms747122.aspx。

正如你可以在下面的MainWindow.xaml代码中看到，有很多<chartingToolkit:Chart>标签，每一个指的是5个不同的图表控件，我们将要使用。

 
 
<Window x:Class="WpfToolkitChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="1031" Width="855" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
        <Grid Height="921">
            <chartingToolkit:Chart Height="262" HorizontalAlignment="Left" Margin="33,0,0,620" Name="columnChart" Title="柱状图" VerticalAlignment="Bottom" Width="360">
                <chartingToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" />              
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="pieChart" Title="饼图报表" VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
                <chartingToolkit:PieSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" />
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="areaChart" Title="区域折线图报表" VerticalAlignment="Top" Margin="33,330,440,0" Height="262">
                <chartingToolkit:AreaSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="barChart" Title="横向柱状图报表" VerticalAlignment="Top" Margin="449,330,43,0" Height="262">
                <chartingToolkit:BarSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="lineChart" Title="折线图报表" VerticalAlignment="Top" Margin="33,611,440,0" Height="254">
                <chartingToolkit:LineSeries  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
        </Grid>
    </ScrollViewer>
</Window

与<window>标签开始，你可以看到，有一个属性，它说的xmlns：chartingToolkit这基本上是指所添加的WPF工具包的命名空间。

我用<ScrollViewer>标签，以水平和垂直滚动条添加到XAML页面。

现在开始第一个图表控制，ColumnChart中，拖放列系列控制在工具箱上的XAML页面，你会看到里面什么都没有的矩形。看在XAML窗口（通常低于设计器），你会看到：

 
 
 <chartingToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" />

现在所有的图表控件需要被封装在<chartingToolkit:Chart> （这是一个很好的做法） 。它有不同的属性，如高度，水平对齐，姓名，职务，宽度等，这些都只是关心它出现在页面上的方式。

我们的基本关注的是理解<chartingTookit:columnSeries>的属性，在这里和在其他所有图表控件。我使用的三个属性。 DependentValuePath和IndependentValuePath都与图（即X轴， Y轴）的轴。 “值” ，并分别分配给他们的“钥匙” – 这是因为我在我的数据模型中使用KeyValuePair < >数据类型（其中有Key和Value ） 。您还可以使用词典或任何其他数据类型的只是确保你有两个参数是相互依存的可视化。的ItemSource属性用于我们的数据绑定到控件。

按照上述相同的所有其他控件提到的，现在我们将数据模型分配给控件。

 

第三步 – 分配数据模型到控件

正如你可以在的MainWindow.xaml.cs文件中看到，这是非常简单的与我们分配数据模型的方式。

 
 
    private void showColumnChart()
    {
      List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();
      valueList.Add(new KeyValuePair<string, int>("Developer",60));
      valueList.Add(new KeyValuePair<string, int>("Misc", 20));
      valueList.Add(new KeyValuePair<string, int>("Tester", 50));
      valueList.Add(new KeyValuePair<string, int>("QA", 30));
      valueList.Add(new KeyValuePair<string, int>("Project Manager", 40));
 
      //设置柱状图
      columnChart.DataContext = valueList;
 
      // 饼图
      pieChart.DataContext = valueList;
 
      // 区域报表图
      areaChart.DataContext = valueList;
 
      //横向柱状图
      barChart.DataContext = valueList;
 
      //折线图
      lineChart.DataContext = valueList;
    }

我使用的是赋值5项静态数据。 DataContext是分配给图表控件的属性，你可以直接将列表控件赋值也是不错的。

第四步 – 编译和运行

编译并运行，你应该看到以下内容，其中包含了柱状图、饼图、区域折线图、横向柱状图、折线图 5个控件的数据展示：