C1Chart多轴绑定:自定义依赖属性实现序列AxisY的绑定

发布时间:2015/09/16 00:09 发布者:Alice

返回博客中心

 自定义依赖属性实现序列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初级教程》系列文章

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网