LiveChart中线的Binding

最新推荐文章于 2024-08-23 17:05:42 发布

物随心转

最新推荐文章于 2024-08-23 17:05:42 发布

阅读量1.8k

点赞数 2

分类专栏： WPF

本文链接：https://blog.csdn.net/sinat_31608641/article/details/89512548

版权

WPF 专栏收录该内容

70 篇文章 6 订阅

订阅专栏

1、绑定 Series

从官网上截取的一部分前台XMAL代码

 <lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" Background="Black">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="" LabelFormatter="{Binding YFormatter}">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" StrokeDashArray="4"  Stroke="#404F56" ></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="" Labels="{Binding Labels}">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" StrokeDashArray="2" Step="1"                   Stroke="#404F56" ></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>

重点是 Series="{Binding SeriesCollection}"，

在后台

 public partial class DataChart : UserControl
    {
        public SeriesCollection SeriesCollection { get; set; }
        public string[] Labels { get; set; }
        public int AxisStep { get; set; }

        public DataChart()
        {
            InitializeComponent();
            SeriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Title = "Series 1",
                    Values=new ChartValues< ObservablePoint>{new  ObservablePoint(6,9),
                    new  ObservablePoint(9,6),
                    new  ObservablePoint(7,20),
                    new  ObservablePoint(16,25)},
                    Stroke = System.Windows.Media.Brushes.Yellow,
                    StrokeDashArray= new DoubleCollection{ 2}
            },
       
            };

            Labels = new[] { "-10", "0", "10", "20", "30", "40" };
            DataContext = this;
        }

    }

重点是定义 public SeriesCollection SeriesCollection { get; set; }的属性，注意，一定要是属性，

如果你定义成 public SeriesCollection SeriesCollection，将不会起任何作用。

在SeriesCollection中可以添加LineSeries，ColumnSeries等等图表.

二、直接BindIng 某个图表的Values

<lvc:CartesianChart Name="chartSeries">
            <lvc:CartesianChart.AxisX >
                <lvc:Axis FontSize="16" Foreground="Black" >
                    <lvc:Axis.Separator>
                        <lvc:Separator x:Name="X_Separator"
                                       x:FieldModifier="public"
                                       StrokeThickness="1" 
                                       StrokeDashArray="2 "
                                       Stroke="#404F56"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis FontSize="16" Foreground="IndianRed">
                    <lvc:Axis.Separator>
                        <lvc:Separator x:Name="ColumnY_Separator"
                                       x:FieldModifier="public" 
                                       StrokeThickness="1"
                                       StrokeDashArray="2 "
                                       Stroke="#404F56"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
                <lvc:Axis FontSize="16" Foreground="DodgerBlue" Position="RightTop">
                    <lvc:Axis.Separator>
                        <lvc:Separator x:Name="CurveY_Separator" 
                                       x:FieldModifier="public" 
                                       StrokeThickness="1" 
                                       StrokeDashArray="2 "
                                       Stroke="#404F56"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>

            <lvc:CartesianChart.Series>
                <lvc:ColumnSeries x:FieldModifier="public" 
                                  ColumnPadding="10"
                                  x:Name="myColumn" Title="" 
                                  Panel.ZIndex="1"
                                  ScalesYAt="0"
                                  Width="50"
                                  MinWidth="50"
                                  Values="{Binding ColumnValues1}"
                                  Fill="BlueViolet" />
                <lvc:LineSeries x:FieldModifier="public"
                                x:Name="myLine" Title=""
                                Panel.ZIndex="2"
                                 ScalesYAt="1"
                                LineSmoothness="1" 
                                Values="{Binding LineValues2}"/>
            </lvc:CartesianChart.Series>
          
        </lvc:CartesianChart>

重点，直接对Values进行绑定，由于我们已经在界面上设置好一切，所以在后台直接对Values进行更改即可

后台代码

 public partial class GaussianChart : UserControl
    {
        public GaussianChart()
        {
            InitializeComponent();
            this.Loaded += InitialData;
        }

        /// <summary>
        /// 直方图的点集合
        /// </summary>
        private IChartValues columnValues1 = new ChartValues<ObservablePoint>();
        public IChartValues ColumnValues1
        {
            get
            {
                return columnValues1;
            }
            set
            {
                if (columnValues1 != value)
                {
                    columnValues1 = value;
                    this.RaisePropertyChanged("ColumnValues1");
                }
            }
        }

        /// <summary>
        /// 曲线的点集合
        /// </summary>
        private IChartValues lineValues2 = new ChartValues<ObservablePoint>();
        public IChartValues LineValues2
        {
            get
            {
                return lineValues2;
            }
            set
            {
                if (lineValues2 != value)
                {
                    lineValues2 = value;
                    this.RaisePropertyChanged("LineValues2");
                }
            }
        }
        /// <summary>
        /// 横坐标：年份，纵坐标：值
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void InitialData(object sender, RoutedEventArgs e)
        {

            ColumnValues1 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint(24, 34),
                 new ObservablePoint(123, 14),
                  new ObservablePoint(225, 14),
                  new ObservablePoint(342, 24),
                  new ObservablePoint(461, 24),
            };

            lineValues2 = new ChartValues<ObservablePoint>
            {
                new ObservablePoint(24,0.003),
                 new ObservablePoint(123,0.005),
                  new ObservablePoint(225,0.006),
                  new ObservablePoint(342,0.008),
                  new ObservablePoint(461,0.009),
            };

            DataContext = this;
        }


        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }