自定义依赖属性实现序列AxisY的绑定
对于C1Chart for WPF,由于序列的AxisY属性并不是dependency property。它不能动态的设置轴,也不能绑定实现。
如果想要动态的做轴的绑定,就不是很方便。
本文就介绍如何自定义AxisY的依赖属性,来实现动态绑定。
在阅读本文前,建议阅读:C1Chart的使用:WPF平台下动态绑定图表序列和C1Chart for WPF初级教程-多轴图表:
了解动态绑定的概念以及如何添加多轴图表,本文就在这个基础上介绍如何设置依赖属性做扩展。
基本步骤如下:
1.创建图表的绑定。
首先按照上述链接的文章创建绑定图表序列。
定义两个类:MyData和MyReport。MyData类用来存储X、Y轴的数据。MyReport类定义ObservableCollection<MyData>,对应图表的一个序列。
并在XMAL里,用SeriesItemsSource和SeriesItemTemplate绑定到数据源中。
参考链接:C1Chart的使用:WPF平台下动态绑定图表序列
2.添加多轴
按照C1Chart for WPF初级教程-多轴图表所演示的方法给图表添加多轴,并利用Axis.Title自定义给轴添加文字。
本文定义了两个轴,分别是“axisY1”和"axisY2",代码参考:
<c1:C1Chart.View> <c1:ChartView> <c1:ChartView.AxisY> <c1:Axis x:Name="axisY1" Min="0" Max="15"> <c1:Axis.Title> <TextBlock Text="axisY1" FontSize="16" FontWeight="Black" TextAlignment="Center" Foreground="Blue"></TextBlock> </c1:Axis.Title> </c1:Axis> </c1:ChartView.AxisY> <c1:Axis AxisType="Y" Min="0" Max="20" Position="Far" x:Name="axisY2" > <c1:Axis.Title> <TextBlock Text="axisY2" FontSize="16" FontWeight="Black" TextAlignment="Center" Foreground="Red"></TextBlock> </c1:Axis.Title> </c1:Axis> </c1:ChartView> </c1:C1Chart.View>
3.自定义AxisY依赖属性
从XYDataSeries继承,然后实现AxisY的依赖属性。
代码参考:
public class XYDataSeriesExtension : XYDataSeries { public static string GetAxisYName(DependencyObject obj) { return (string)obj.GetValue(AxisYNameProperty); } public static void SetAxisYName(DependencyObject obj, string value) { obj.SetValue(AxisYNameProperty, value); } // Using a DependencyProperty as the backing store for AxisYName. This enables animation, styling, binding, etc... public static readonly DependencyProperty AxisYNameProperty = DependencyProperty.RegisterAttached("AxisYName", typeof(string), typeof(XYDataSeriesExtension), new PropertyMetadata(null, new PropertyChangedCallback(OnAxisYNamePropertyChanged))); public static void OnAxisYNamePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) { XYDataSeriesExtension series = obj as XYDataSeriesExtension; series.AxisY = (string)e.NewValue; } }
4.AxisY的绑定
为了实现AxisY的绑定,先要在步骤一中定义的类中添加一个属性:AxisYName属性,用来设置和获取AxisY的名称。
MyReport类更改如下:
public class MyReport { //对应图表一个系列 public ObservableCollection<MyData> Data { get; set; } public string AxisYName { get; set; } }
然后在数据初始化的时候,设置MyReport的AxisYName属性的值。这样在绑定后就可以指定序列分别代表的是哪个轴(axisY1或是axisY2)。
代码参考:
report.AxisYName = "axisY1";
最后在XAML文件里,通过自定义的XYDataSeriesExtension的AxisYName属性做绑定。
代码参考:
<c1:C1Chart.Data> <c1:ChartData SeriesItemsSource="{Binding MyReports}"> <c1:ChartData.SeriesItemTemplate> <DataTemplate> <local:XYDataSeriesExtension ItemsSource="{Binding Data}" ValueBinding="{Binding Y}" XValueBinding="{Binding X}" local:XYDataSeriesExtension.AxisYName="{Binding AxisYName}"></local:XYDataSeriesExtension> </DataTemplate> </c1:ChartData.SeriesItemTemplate> </c1:ChartData> </c1:C1Chart.Data>
至此,就完成了依赖属性的设置和绑定。
相同的,我们也可以对序列显示在Legend区域的文字进行绑定,只要按照上述步骤对Serires序列的Label属性做相同的操作,设置依赖属性,即可实现绑定。
详细的步骤不再阐述。效果如下图所示:
Series1第一个序列对应的axisY2,Series2第二个序列���应的axisY1,不同的序列对应不同的轴。
欢迎下载详细的代码获取更多的帮助:
C1Chart_AxiYBinding.zip (10.87 kb)
更多资源
C1Chart的在线英文产品文档地址:
http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm
如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html
另外,更多信息,欢迎阅读《C1Chart for WPF初级教程》系列文章: