LiveCharts.WPF图表模块封装

时间:2025-04-27 08:11:33

WPF LiveCharts.WPF 封装实现

下面是一个完整的 WPF LiveCharts.WPF 封装实现,提供了常用图表的简单使用方式,并支持数据绑定和更新。

一、LiveCharts.WPF 封装类

1. 图表基类 (ChartBase.cs)

 
using LiveCharts;
using LiveCharts.Wpf;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfSupervisor.Charts
{
    public abstract class ChartBase : UserControl
    {
        protected ChartValues<double> _chartValues = new ChartValues<double>();
        protected SeriesCollection _seriesCollection = new SeriesCollection();
        protected LiveCharts.Wpf.Axis _xAxis = new LiveCharts.Wpf.Axis();
        protected LiveCharts.Wpf.Axis _yAxis = new LiveCharts.Wpf.Axis();

        static ChartBase()
        {
            // 设置默认样式
            DefaultStyles.Initialize();
        }

        public ChartBase()
        {
            InitializeComponent();
            SetupChart();
        }

        protected abstract void InitializeComponent();
        protected abstract void SetupChart();

        public void UpdateData(IEnumerable<double> newData)
        {
            _chartValues.Clear();
            foreach (var value in newData)
            {
                _chartValues.Add(value);
            }
            OnPropertyChanged(nameof(ChartValues));
        }

        public void AddDataPoint(double value)
        {
            _chartValues.Add(value);
            OnPropertyChanged(nameof(ChartValues));
        }

        public void ClearData()
        {
            _chartValues.Clear();
            OnPropertyChanged(nameof(ChartValues));
        }

        public SeriesCollection SeriesCollection
        {
            get => _seriesCollection;
            set
            {
                _seriesCollection = value;
                OnPropertyChanged(nameof(SeriesCollection));
            }
        }

        public ChartValues<double> ChartValues
        {
            get => _chartValues;
            set
            {
                _chartValues = value;
                OnPropertyChanged(nameof(ChartValues));
            }
        }

        public LiveCharts.Wpf.Axis XAxis
        {
            get => _xAxis;
            set
            {
                _xAxis = value;
                OnPropertyChanged(nameof(XAxis));
            }
        }

        public LiveCharts.Wpf.Axis YAxis
        {
            get => _yAxis;
            set
            {
                _yAxis = value;
                OnPropertyChanged(nameof(YAxis));
            }
        }

        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 折线图封装 (LineChartControl.xaml & LineChartControl.xaml.cs)

​LineChartControl.xaml​

 
<UserControl x:Class="WpfSupervisor.Charts.LineChartControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:local="clr-namespace:WpfSupervisor.Charts"
             x:Name="root">
    <lvc:CartesianChart Series="{Binding SeriesCollection, ElementName=root}" 
                       Axes="{Binding Axes, ElementName=root}"
                       LegendLocation="Right"
                       Hoverable="False"
                       DataTooltip="{x:Null}">
        <lvc:CartesianChart.ChartLegend>
            <lvc:DefaultLegend BulletSize="10" />
        </lvc:CartesianChart.ChartLegend>
        <lvc:CartesianChart.Zoom>
            <lvc:ZoomingOptions ZoomMode="X" />
        </lvc:CartesianChart.Zoom>
    </lvc:CartesianChart>
</UserControl>

​LineChartControl.xaml.cs​

 
using LiveCharts;
using LiveCharts.Wpf;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfSupervisor.Charts
{
    public partial class LineChartControl : ChartBase
    {
        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof(string), typeof(LineChartControl), 
            new PropertyMetadata("折线图", OnTitleChanged));

        public static readonly DependencyProperty LineColorProperty =
            DependencyProperty.Register("LineColor", typeof(Brush), typeof(LineChartControl), 
            new PropertyMetadata(new SolidColorBrush(Colors.Blue), OnLineColorChanged));

        public string Title
        {
            get => (string)GetValue(TitleProperty);
            set => SetValue(TitleProperty, value);
        }

        public Brush LineColor
        {
            get => (Brush)GetValue(LineColorProperty);
            set => SetValue(LineColorProperty, value);
        }

        public LineChartControl()
        {
            InitializeComponent();
        }

        protected override void InitializeComponent()
        {
            // 已在XAML中定义
        }

        protected override void SetupChart()
        {
            _seriesCollection = new SeriesCollection
            {
                new LineSeries
                {
                    Title = Title,
                    Values = ChartValues,
                    PointGeometrySize = 5,
                    Stroke = LineColor,
                    Fill = Brushes.Transparent
                }
            };

            _xAxis = new LiveCha