LiveChart中线的Binding

蔚落 2023-12-06 07:09 33阅读 0赞

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));
                }
            }
        }