按时间顺序更新折线图

LiveCharts.Wpf(0.9.7)

xaml

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

<StackPanel Margin="0,10,0,0"  Background="#DCDCDC" Grid.Row="2" >
            <GroupBox Header="设定温度/显示温度" Tag="Temperature Monitoring" Height="400" Margin="10">
                <Grid Margin="20">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <Border Background="#DD2BB6FE" Width="15" Height="15" Margin="3,0"/>
                        <TextBlock Text="设定温度(℃)" Foreground="#FF08113C" FontSize="14" VerticalAlignment="Center" Margin="0,0,10,0"/>
                        <Border Background="IndianRed" Width="15" Height="15" Margin="3,0"/>
                        <TextBlock Text="实际温度(℃)" Foreground="#FF08113C" FontSize="14" VerticalAlignment="Center"/>
                        <Button 
                            Margin="100,0"
                            Width="100"
                            Height="28"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Top"
                            Command="{Binding IsReadingCommand}"
                            Content="图表控制"/>
                        <Button 
                                Margin="20,0"
                            Width="100"
                            Height="28"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Top"
                            Command="{Binding SavePictureCommand}"
                            CommandParameter="{Binding ElementName=Pic}"
                            Content="保存图片"/>
                    </StackPanel>
                    <ContentControl Grid.Row="1">
                        <lvc:CartesianChart  
                                        AnimationsSpeed="0:0:1" 
                                        Hoverable="False" 
                                        DataTooltip="{x:Null}"
                                        Name="Pic">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Values="{Binding ChartValues}"
                                            PointGeometry="{x:Null}"
                                            LineSmoothness="1"
                                            StrokeThickness="6"
                                            Stroke="#F34336"
                                            Fill="Transparent"/>

                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis LabelFormatter="{Binding DateTimeFormatter}"
                                      Foreground="#FF08113C"
                                      FontSize="14"  
                                      MaxValue="{Binding AxisMax}"
                                      MinValue="{Binding AxisMin}"
                                      Unit="{Binding AxisUnit}"
                                      LabelsRotation="45">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="{Binding AxisStep}"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis Foreground="#FF08113C" FontSize="14">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="40"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </ContentControl>


                </Grid>
            </GroupBox>

        </StackPanel>

//构造函数内

#region 折线图相关
            SelectadCommand = new DelegateCommand(Selectad);
            var mapper = Mappers.Xy<MeasureModel>()
                .X(model => model.DateTime.Ticks)//使用 DateTime.Ticks 作为 X
                .Y(model => model.Value);        //使用 value 属性作为 Y
            //全局保存映射器
            Charting.For<MeasureModel>(mapper);
            //values 属性将存储我们的 values 数组
            ChartValues = new ChartValues<MeasureModel>();
            //X标签值
            DateTimeFormatter = value => new DateTime((long)value).ToString("mm:ss");
            //AxisStep 强制 X 轴上每个分隔符之间的距离
            AxisStep = TimeSpan.FromSeconds(1).Ticks;
            ////AxisUnit force 让轴知道我们正在绘制秒数
            //这并不总是必要的，但它可以防止错误的标签
            AxisUnit = TimeSpan.TicksPerSecond;
            SetAxisLimits(DateTime.Now);

            IsReadingCommand = new DelegateCommand(Reading);
            SavePictureCommand = new DelegateCommand<CartesianChart>(ExecuteSavePicture);

#region 折线图
        public DelegateCommand<CartesianChart> SavePictureCommand { get; set; }
        public DelegateCommand IsReadingCommand { get; set; }
        public ChartValues<MeasureModel> ChartValues { get; set; }
        public Func<double, string> DateTimeFormatter { get; set; }
        public double AxisStep { get; set; }
        public double AxisUnit { get; set; }

        private double _trend;

        private double _axisMax;

        public double AxisMax
        {
            get { return _axisMax; }
            set { _axisMax = value; RaisePropertyChanged(); }
        }

        private double _axisMin;

        public double AxisMin
        {
            get { return _axisMin; }
            set { _axisMin = value; RaisePropertyChanged(); }
        }
        public bool IsReading { get; set; }

        private void Read()
        {
            var r = new Random();

            while (IsReading)
            {
                Thread.Sleep(150);
                var now = DateTime.Now;
                _trend += r.Next(-8,10);

                ChartValues.Add(new MeasureModel
                {
                    DateTime = now,
                    Value =_trend
                });
                SetAxisLimits(now);
                //只允许使用最后 150 个值
                if (ChartValues.Count > 300) ChartValues.RemoveAt(0);
            }
        }

        private void SetAxisLimits(DateTime now)
        {
            AxisMax = now.Ticks + TimeSpan.FromSeconds(1).Ticks;//让我们强制轴提前 1 秒
            AxisMin = now.Ticks - TimeSpan.FromSeconds(40).Ticks;//落后 8 秒
        }

        /// <summary>
        /// 图表启动停止
        /// </summary>
        private void Reading()
        {
            IsReading = !IsReading;
            if (IsReading)
            {
                Task.Factory.StartNew(Read);//为指定的操作委托创建并启动任务。
            }
        }

        /// <summary>
        /// 实现图表截图
        /// </summary>
        /// <param name="chart"></param>
        private void ExecuteSavePicture(CartesianChart chart)
        {
            //背景色，chart是前台按钮绑定参数传过来的
            chart.Background = System.Windows.Media.Brushes.White;
            ////找到lvc的父级控件
            ContentControl groupBox = (ContentControl)chart.Parent;
            //获取控件大小
            groupBox.Measure(chart.RenderSize);
            chart.Update(true,true);//强制图表更新
            groupBox.UpdateLayout();
            SaveFileDialog saveFileDialog = new SaveFileDialog();
            saveFileDialog.Title = "图片另存为";
            saveFileDialog.Filter = "jpg图片|*.JPG|png图片|*.PNG|jpeg图片|*.JPEG";
            saveFileDialog.FilterIndex = 2;
            saveFileDialog.RestoreDirectory = true;//保存对话框是否记忆上次打开的目录
            bool? result = saveFileDialog.ShowDialog();//因为时WPF，相对于OK
            if (result == true)
            {
                FileStream fs = new FileStream($"{saveFileDialog.FileName}",FileMode.Create);//要保存的路径
                //对象转换成位图
                RenderTargetBitmap bmp = new RenderTargetBitmap((int)chart.ActualWidth + 10, (int)chart.ActualHeight + 10, 96, 96, PixelFormats.Pbgra32);
                bmp.Render(chart);
                //对象的集合编码转成图像流
                BitmapEncoder encoder = new PngBitmapEncoder();
                encoder.Frames.Add(BitmapFrame.Create(bmp));
                //保存路径中
                encoder.Save(fs);
                //释放资源
                fs.Close();
                fs.Dispose();
                MessageBox.Show("保存成功");
            }
        }
        #endregion