diff --git a/View/CurveDiagramView.xaml b/View/CurveDiagramView.xaml index 7ad3e36..58a3ab9 100644 --- a/View/CurveDiagramView.xaml +++ b/View/CurveDiagramView.xaml @@ -10,8 +10,6 @@ d:DesignHeight="630" d:DesignWidth="1280"> + Series="{Binding Series}" YAxes="{Binding YAxes}" XAxes="{Binding XAxes}"/> diff --git a/ViewModel/CurveDiagramViewModel.cs b/ViewModel/CurveDiagramViewModel.cs index c187ec0..f40c314 100644 --- a/ViewModel/CurveDiagramViewModel.cs +++ b/ViewModel/CurveDiagramViewModel.cs @@ -15,6 +15,8 @@ using System.Drawing; using System.Windows.Media.TextFormatting; using System.Xml.Linq; using SkiaSharp; +using LiveChartsCore.Defaults; +using static System.Net.WebRequestMethods; namespace DyeingComputer.ViewModel { @@ -22,52 +24,92 @@ namespace DyeingComputer.ViewModel { public ISeries[] Series { get; set; } = { - new LineSeries + new LineSeries { - Name = Properties.Resources.Temperature +"1", - Values = new double[] { 5, 0, 1000, 0, 5, 0 }, + Name = Properties.Resources.Temperature +"2", + Values = new DateTimePoint[] + { + new DateTimePoint(Convert.ToDateTime( "2024-01-01 09:08:00"), 24), + new DateTimePoint(Convert.ToDateTime( "2024-01-02 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-03 09:08:00"), 67), + new DateTimePoint(Convert.ToDateTime( "2024-01-04 09:08:00"), 32), + new DateTimePoint(Convert.ToDateTime( "2024-01-05 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-06 09:08:00"), 27), + new DateTimePoint(Convert.ToDateTime( "2024-01-07 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-8 09:08:00"), 17), + }, + Stroke = new SolidColorPaint(s_blue, 2), + GeometrySize = 1, + GeometryStroke = new SolidColorPaint(s_blue, 2), Fill = null, - GeometrySize = 0, - // use the line smoothness property to control the curve - // it goes from 0 to 1 - // where 0 is a straight line and 1 the most curved - LineSmoothness = 1, + + LineSmoothness = 0, ScalesYAt = 0, }, - new LineSeries + new LineSeries { - Name = Properties.Resources.Temperature +"2", - Values = new double[] { 7, 2, 7, 2, 7, 2 ,6,67,5,66,56,5}, - Fill = null, - GeometrySize = 0, - LineSmoothness = 1, + Name = Properties.Resources.Temperature +"2", + Values = new DateTimePoint[] + { + new DateTimePoint(Convert.ToDateTime( "2024-01-01 09:08:00"), 424), + new DateTimePoint(Convert.ToDateTime( "2024-01-02 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-03 09:08:00"), 647), + new DateTimePoint(Convert.ToDateTime( "2024-01-04 09:08:00"), 532), + new DateTimePoint(Convert.ToDateTime( "2024-01-05 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-06 09:08:00"), 287), + new DateTimePoint(Convert.ToDateTime( "2024-01-07 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-8 09:08:00"), 17), + }, + Fill = null, + Stroke = new SolidColorPaint(s_blue, 2), + GeometrySize = 0, + GeometryStroke = new SolidColorPaint(s_blue, 2), + LineSmoothness = 0, ScalesYAt = 0, }, - new LineSeries + new LineSeries { Name = Properties.Resources.Flowmeter, - Values = new double[] { 7, 2, 7, 5467,6,67,5,66,56,5}, + Values = new DateTimePoint[] + { + new DateTimePoint(Convert.ToDateTime( "2024-01-01 09:08:00"), 4), + new DateTimePoint(Convert.ToDateTime( "2024-01-02 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-03 09:08:00"), 647), + new DateTimePoint(Convert.ToDateTime( "2024-01-04 09:08:00"), 5732), + new DateTimePoint(Convert.ToDateTime( "2024-01-05 09:08:00"), 5457), + new DateTimePoint(Convert.ToDateTime( "2024-01-06 09:08:00"), 2257), + new DateTimePoint(Convert.ToDateTime( "2024-01-07 09:08:00"), 57), + new DateTimePoint(Convert.ToDateTime( "2024-01-8 09:08:00"), 517), + }, + Fill = null, + Stroke = new SolidColorPaint(s_red, 2), GeometrySize = 0, - LineSmoothness = 1, + GeometryStroke = new SolidColorPaint(s_red, 2), + LineSmoothness = 0, ScalesYAt = 1, + } }; - // You can use the DateTimeAxis class to define a date time based axis - - // The first parameter is the time between each point, in this case 1 day - // you can also use 1 year, 1 month, 1 hour, 1 minute, 1 second, 1 millisecond, etc - // The second parameter is a function that receives the value and returns the label + + //x轴时间格式 public Axis[] XAxes { get; set; } = - { new DateTimeAxis(TimeSpan.FromSeconds(5) , date => date.ToString("yyyy-MM-dd HH:mm:ss")) }; - + { + new DateTimeAxis(TimeSpan.FromSeconds(5) , date => date.ToString("yyyy-MM-dd HH:mm")) + { + CrosshairLabelsBackground = SKColors.DarkGray.AsLvcColor(), + CrosshairLabelsPaint = new SolidColorPaint(SKColors.DarkSlateBlue, 1), + CrosshairPaint = new SolidColorPaint(SKColors.DarkSlateGray, 1), + }, + }; + //颜色 private static readonly SKColor s_blue = new SKColor(25, 118, 210); private static readonly SKColor s_red = new SKColor(229, 57, 53); private static readonly SKColor s_yellow = new SKColor(198, 167, 0); public ICartesianAxis[] YAxes { get; set; } ={ - new Axis //“units” 和 “tens” 系列将在此轴上缩放 + new Axis //y在此轴上缩放 { Name = Properties.Resources.Temperature +" ( °C )", NameTextSize = 24, @@ -78,8 +120,9 @@ namespace DyeingComputer.ViewModel LabelsPaint = new SolidColorPaint(s_blue), TicksPaint = new SolidColorPaint(s_blue), SubticksPaint = new SolidColorPaint(s_blue), - DrawTicksPath = true - }, + DrawTicksPath = true, + CrosshairSnapEnabled = true + },//温度轴 new Axis // the "hundreds" series will be scaled on this axis { Name = Properties.Resources.Flowmeter +" ( L )", @@ -93,12 +136,14 @@ namespace DyeingComputer.ViewModel SubticksPaint = new SolidColorPaint(s_red), DrawTicksPath = true, ShowSeparatorLines = false, + CrosshairSnapEnabled = true, Position = LiveChartsCore.Measure.AxisPosition.End - }, }; + }, //液位轴 + }; public CurveDiagramViewModel() { - + } } }