快捷導(dǎo)航

WPF利用LiveCharts實(shí)現(xiàn)動(dòng)態(tài)曲線圖繪制

更新時(shí)間：2023年10月09日 08:57:12 作者：熊思宇

LiveCharts是一個(gè)比較漂亮的WPF圖表控件,在數(shù)據(jù)發(fā)生變化后,還可以設(shè)置相對(duì)于的動(dòng)畫效果,本文就來(lái)利用LiveCharts繪制簡(jiǎn)單的動(dòng)態(tài)曲線圖吧

效果

在超過(guò)圖表的最大值后，X軸會(huì)自動(dòng)向右邊移動(dòng)

LiveCharts是一個(gè)比較漂亮的WPF圖表控件，在數(shù)據(jù)發(fā)生變化后，還可以設(shè)置相對(duì)于的動(dòng)畫效果，但也有自己的缺點(diǎn)，比如數(shù)據(jù)量過(guò)大，可能會(huì)非常的卡，有一次，我在寫柱狀圖時(shí)，將幾個(gè)柱子的值設(shè)置成15000，結(jié)果整整卡了幾十秒，在使用時(shí)還是需要注意的。

官方網(wǎng)站：點(diǎn)擊跳轉(zhuǎn)

開源代碼：點(diǎn)擊跳轉(zhuǎn)

安裝 LiveChart

在NuGet中直接搜索 LiveChart，選擇 LiveCharts.Wpf

在使用的界面當(dāng)中引用LiveChart.Wpf的類庫(kù)

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

如果之前就沒有使用過(guò)LiveChart，可以用下面的小案例看看效果。

以直方圖、折線圖為例, 都屬于 CartesianChart 下的一種 Series 類型, 例如折線圖,如下:

<lvc:CartesianChart>
<lvc:CartesianChart.Series>
      <!--設(shè)置Series的類型為 Line 類型, 該類型提供了一些折線圖的實(shí)現(xiàn)-->
    <lvc:LineSeries/>  
</lvc:CartesianChart.Series>
</lvc:CartesianChart>

LinSeries 綁定數(shù)據(jù)設(shè)定Values即可, 可以看到Values單詞帶s，則代表這是一種復(fù)數(shù)集合類型，繼承于 IChartValues，所以最終綁定的數(shù)據(jù)符合 ChartValues 即可，下圖綁定了為數(shù)字類型的集合:

<lvc:CartesianChart>
 <lvc:CartesianChart.Series>
     <!--設(shè)置Series的類型為 Line 類型, 該類型提供了一些折線圖的實(shí)現(xiàn)-->
     <lvc:LineSeries Values="1,2,3,4,5,6"/>
     <lvc:LineSeries Values="2,4,6,8,10,12"/>
 </lvc:CartesianChart.Series>
</lvc:CartesianChart>

這里是 LiveChart 一些簡(jiǎn)單的使用方法，下面是用綁定數(shù)據(jù)的方式進(jìn)行顯示，在工作中，盡量使用數(shù)據(jù)綁定的方式，更適合項(xiàng)目的維護(hù)。

前端

<Window x:Class="WpfApplication7.MainWindow"
        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"
        Title="MainWindow" Width="700" Height="400" Loaded="Window_Loaded" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="AntiqueWhite">
            <Button Content="測(cè)試"  Margin="0,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
        </Grid>
        <Grid Grid.Row="1">
            <lvc:CartesianChart Series="{Binding LineSeriesCollection}" LegendLocation="Right">
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis LabelFormatter="{Binding CustomFormatterX}"  MaxValue="{Binding AxisXMax}" MinValue="{Binding AxisXMin}">
                        <lvc:Axis.Separator>
                            <lvc:Separator Step="1" />
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisX>
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis LabelFormatter="{Binding CustomFormatterY}" MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}">
                    </lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
        </Grid>
    </Grid>
</Window>

后端

先定義一個(gè)數(shù)據(jù)更新的類 ViewModelBase

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WpfApplication7
{
    /// <summary>
    /// 實(shí)現(xiàn)了屬性更改通知的基類
    /// </summary>
    public class ViewModelBase : System.ComponentModel.INotifyPropertyChanged
    {
        public virtual event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// 屬性值變化時(shí)發(fā)生
        /// </summary>
        /// <param name="propertyName"></param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
        /// <summary>
        /// 屬性值變化時(shí)發(fā)生
        /// </summary>
        /// <param name="propertyName"></param>
        protected virtual void OnPropertyChanged<T>(System.Linq.Expressions.Expression<Func<T>> propertyExpression)
        {
            var propertyName = (propertyExpression.Body as System.Linq.Expressions.MemberExpression).Member.Name;
            this.OnPropertyChanged(propertyName);
        }
    }
}

后端代碼

using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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;
namespace WpfApplication7
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        private Mode Modes = new Mode();
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = Modes;
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Modes.OnClick();
        }
    }
    public class Mode : ViewModelBase
    {
        public SeriesCollection LineSeriesCollection { get; set; }
        private double axisXMax;
        public double AxisXMax
        {
            get { return axisXMax; }
            set { axisXMax = value; this.OnPropertyChanged("AxisXMax"); }
        }
        private double axisXMin;
        public double AxisXMin
        {
            get { return axisXMin; }
            set { axisXMin = value; this.OnPropertyChanged("AxisXMin"); }
        }
        private double axisYMax;
        public double AxisYMax
        {
            get { return axisYMax; }
            set { axisYMax = value; this.OnPropertyChanged("AxisYMax"); }
        }
        private double axisYMin;
        public double AxisYMin
        {
            get { return axisYMin; }
            set { axisYMin = value; this.OnPropertyChanged("AxisYMin"); }
        }
        private Random Randoms = new Random();
        public Func<double, string> CustomFormatterX { get; set; }
        public Func<double, string> CustomFormatterY { get; set; }
        //綁定的X軸數(shù)據(jù)
        private ChartValues<double> ValueList { get; set; }
        //表中最大容納個(gè)數(shù)
        private int TabelShowCount = 10;
        private string CustomFormattersX(double val)
        {
            return string.Format("{0}天", val);
        }
        private string CustomFormattersY(double val)
        {
            return string.Format("{0}公斤", val);
        }
        public void OnClick()
        {
            int yValue = Randoms.Next(2, 1000);
            //向圖表中添加數(shù)據(jù)
            ValueList.Add(yValue);
            //確保Y軸曲線不會(huì)超過(guò)圖表
            int maxY = (int)ValueList.Max();
            AxisYMax = maxY + 30;
            //Y軸保持?jǐn)?shù)據(jù)居中（曲線會(huì)上下晃動(dòng)）
            //int minY = ValueList.Count == 1 ? 0 : (int)ValueList.Min();
            //AxisYMin = minY - 10;
            //y軸的設(shè)置
            if (ValueList.Count > TabelShowCount)
            {
                AxisXMax = ValueList.Count - 1;
                AxisXMin = ValueList.Count - TabelShowCount;
            }
            //這里如果移除數(shù)組，圖表曲線會(huì)原地起伏，就沒有X軸移動(dòng)的動(dòng)畫效果了
            //if (ValueList.Count > 20)
            //{
            //    ValueList.RemoveAt(0);
            //}
        }
        public Mode()
        {
            AxisXMax = 10;
            AxisXMin = 0;
            AxisYMax = 10;
            AxisYMin = 0;
            ValueList = new ChartValues<double>();
            LineSeriesCollection = new SeriesCollection();
            CustomFormatterX = CustomFormattersX;
            CustomFormatterY = CustomFormattersY;
            LineSeries lineseries = new LineSeries();
            lineseries.DataLabels = true;
            lineseries.Values = ValueList;
            LineSeriesCollection.Add(lineseries);
        }
    }
}

運(yùn)行后一直點(diǎn)擊測(cè)試按鈕，就可以看到效果了。

到此這篇關(guān)于WPF利用LiveCharts實(shí)現(xiàn)動(dòng)態(tài)曲線圖繪制的文章就介紹到這了,更多相關(guān)WPF LiveCharts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: