当前位置：首页 > news >正文

C#-WPF-控件-CartesianChart图表-线性3(LineSeries)-MVVM模式（封装数据绑定类）

news 2026/7/28 20:28:45

知识点：

1. 数据绑定（数据绑定类与图形操作在同一个类中）
2. X轴上显示点数（主类中）
3. 添加随机值在图表中（值针对Y轴值）
4. 清空图表
5. 图标titel显示

实例

图表控件绑定 SeriesCollectionA（ Utils_ChartA.cs中）

<lvc:CartesianChart x:Name="LiveChartsA" Margin="10,146,185,51" Series="{Binding SeriesCollectionA}" Background="#FFF8FCFD" LegendLocation="Top"> </lvc:CartesianChart>

提示框绑定 MsgTips （ Utils_ChartA.cs中）

<Label Grid.Row="2" Grid.Column="0" FontSize="12" Background="#22FF0000" Content="{Binding MsgTips}" />

Utils_ChartA.cs(数据绑定类与图形操作在同一个类中)

using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnostics; using System.Runtime.CompilerServices; using System.Text; using System.Windows.Media; using LiveCharts; using LiveCharts.Wpf; namespace Wpf_Math.MyUC_TestChart { public class Utils_ChartA : INotifyPropertyChanged { private string _msgTips; private SeriesCollection _seriesCollectionA; public Utils_ChartA() { // 在构造函数中初始化 _seriesCollectionA = new SeriesCollection(); } public string MsgTips { get => _msgTips; set { _msgTips = value; OnPropertyChanged(); } } public SeriesCollection SeriesCollectionA { get => _seriesCollectionA; set { if (_seriesCollectionA != value) { _seriesCollectionA = value; OnPropertyChanged(); } } } public void InitializeLiveCharts1(int XPonitLength) { if (XPonitLength <= 0) XPonitLength = 100; LineSeries myLineseries = new LineSeries() //实例化一条折线图 { Title = "M485-----电压测试图", //设置折线的标题 StrokeThickness = 1, // 设置折线粗细 LineSmoothness = 1, //折线图直线形式 0 or 1 PointGeometry = null, //折线图的无点样式 Stroke = Brushes.Red, // 红色线条 Values = new ChartValues<double>(new Double[XPonitLength]) //添加折线图的数据(X轴划分点数) }; SeriesCollectionA.Add(myLineseries); } public void addData(double n) { //通过Dispatcher在工作线程中更新窗体的UI元素 Debug.Write(n + "n \r\n"); SeriesCollectionA[0].Values.Add(n); SeriesCollectionA[0].Values.RemoveAt(0); } public void Clear(CartesianChart Chart) { Chart.Series.Clear(); //清空数据 InitializeLiveCharts1(0); //重复新初始化 } public event PropertyChangedEventHandler? PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string name = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); } }

主操作界面

using System; using System.Collections.Generic; using System.Diagnostics; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using LiveCharts; using LiveCharts.Wpf; namespace Wpf_Math.MyUC_TestChart { public partial class UC_ChartA : UserControl { int i; Utils_ChartA ChartA = new Utils_ChartA(); public UC_ChartA() { InitializeComponent(); this.DataContext = ChartA; ChartA.MsgTips = "提示："; ChartA.InitializeLiveCharts1(0); } private void Button_Click(object sender, RoutedEventArgs e) { Button button = (Button)sender; ChartA.MsgTips = "你点击了--" + button.Content + " " + i++; //Debug.Write("你点击了--btn_calulate\"\r\n") switch (button.Name) { case "btn_addA": { ChartA.addData(new Random().Next(0, 30)); break; } case "btn_addB": { ChartA.addData(new Random().Next(80, 99)); break; } case "btn_clear":{ ChartA.Clear(LiveChartsA);break;} default: break; } } } }