使用WPF toolkit--Charts使你的数据展现更加形象
今天在wooboo上看我们移动广告的收入情况时，发现上面的那个图表挺好看的，这个图表是用flex做的，查了下还挺有名，叫fusionchart，有免费版本和收费版本。
（flex上有名的fusion chart）
虽然.net没有提供线程的wpf/silverlight图表控件，但是在wpf/silverlight toolkit中包含了常用实用控件：AreaSeries，PieSeries，LineSeries，BarSeries，BubbleSeries，ColumnSeries，ScatterSeries。
实战toolkit-charts
为了展示toolkit-charts的使用，我们来建立一个wpf项目。
首先加入程序集引用：System.Windows.Controls.DataVisualization.Toolkit然后再xaml中加入命名空间
xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
这样我们就可以在toolkit中使用这些控件。
<chart:Chart Background="#FF673EFF" TitleStyle="{DynamicResource TitleStyle2}" Style="{DynamicResource ChartStyle2}">
<chart:AreaSeries Title="AreaSeries"
ItemsSource="{Binding Path=ChartData}"
IndependentValueBinding="{Binding Left}"
DependentValueBinding="{Binding Right}" Style="{DynamicResource AreaSeriesStyle1}"/>
</chart:Chart>
ItemsSource的数据就是areaseries对应的数据。
IndependentValueBinding和DependentValueBinding分别对应每个节点数据的名称和数据值。
这属性绑定到的目标名称会通过反射得到相应对象的字段（Left和Right分别对应我自定义类型Tuple<T1,T2>中的Left和Right属性）
然后我们建立这个视图的viewmodel，采用标准的MVVM结构：
ChartsViewModel
public class ChartsViewModel
{
private static readonly Random seed = new Random();
public ObservableCollection < Tuple < string , double >> ChartData
{
get ;
private set ;
}
public ChartsViewModel()
{
ChangeDataCommand = new RelayCommand((o) => changeData());
ChartData = new ObservableCollection < Tuple < string , double >> ();
}
public ICommand ChangeDataCommand
{
get ;
private set ;
}
private void changeData()
{
ChartData.Add( new Tuple < string , double > ( " A " + seed.NextDouble(), 1.5 + seed.Next( 10 )));
}
}
RelayCommand是一个ICommand的实现，比较简单，代码如下：
public class RelayCommand : ICommand
{
private Action < object > _execute;
private Predicate < object > _predicate;
public RelayCommand(Action < object > execute)
: this (execute, null )
{
}
public RelayCommand(Action < object > execute, Predicate < object > predicate)
{
_execute = execute;
_predicate = predicate;
}
public bool CanExecute( object parameter)
{
if (_predicate == null )
return true ;
return _predicate(parameter);
}
public event EventHandler CanExecuteChanged;
public void Execute( object parameter)
{
_execute(parameter);
}
}
这样我们就将View中的data和command绑定到ViewModel中。
为了更加形象的展示数据的联动效果，再加上一个button，绑定其命令到ViewModel，在触发命令的时候改变图表对应的数据。
private void changeData()
{
ChartData.Add(new Tuple<string, double>("A" + seed.NextDouble(), 1.5 + seed.Next(10)));
}
在app.xaml中加入viewmodel作为资源：
<Application.Resources>
<ResourceDictionary>
<vm:ChartsViewModel x:Key="chartViewModel" />
</ResourceDictionary>
</Application.Resources>
运行效果如下：
不过toolkit自带的图表控件还不像fusionchart的效果那么生动，功能相比也有些欠缺。这里介绍另一个wpf/silverlight的图表控件：visifire，visifire是codeplex上的一个开源项目（不过有收费版本，viisifir比较特殊，它是Dual License的- Open Source & Commercial），具备2D、3D的wpf/silverlight/windows phone图表控件，可以说比toolkit-chart和fusion要强大的多，关于visifire的使用，我会找时间在后期进行讲解。