WPF利用LiveCharts实现动态曲线图绘制

 更新时间:2023年10月09日 08:57:12   作者:熊思宇  
LiveCharts是一个比较漂亮的WPF图表控件,在数据发生变化后,还可以设置相对于的动画效果,本文就来利用LiveCharts绘制简单的动态曲线图吧

效果

在超过图表的最大值后,X轴会自动向右边移动

LiveCharts是一个比较漂亮的WPF图表控件,在数据发生变化后,还可以设置相对于的动画效果,但也有自己的缺点,比如数据量过大,可能会非常的卡,有一次,我在写柱状图时,将几个柱子的值设置成15000,结果整整卡了几十秒,在使用时还是需要注意的。

官方网站:点击跳转

开源代码:点击跳转

安装 LiveChart

在NuGet中直接搜索 LiveChart,选择 LiveCharts.Wpf

在使用的界面当中引用LiveChart.Wpf的类库 

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

如果之前就没有使用过LiveChart,可以用下面的小案例看看效果。

以直方图、折线图为例, 都属于 CartesianChart 下的一种 Series 类型, 例如折线图,如下:

<lvc:CartesianChart>
<lvc:CartesianChart.Series>
      <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
    <lvc:LineSeries/>  
</lvc:CartesianChart.Series>
</lvc:CartesianChart>

LinSeries 绑定数据设定Values即可, 可以看到Values单词带s,则代表这是一种复数集合类型,继承于 IChartValues,所以最终绑定的数据符合 ChartValues 即可,下图绑定了为数字类型的集合:

<lvc:CartesianChart>
 <lvc:CartesianChart.Series>
     <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
     <lvc:LineSeries Values="1,2,3,4,5,6"/>
     <lvc:LineSeries Values="2,4,6,8,10,12"/>
 </lvc:CartesianChart.Series>
</lvc:CartesianChart>

这里是 LiveChart 一些简单的使用方法,下面是用绑定数据的方式进行显示,在工作中,尽量使用数据绑定的方式,更适合项目的维护。

前端

<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="测试"  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>

后端

先定义一个数据更新的类 ViewModelBase

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WpfApplication7
{
    /// <summary>
    /// 实现了属性更改通知的基类
    /// </summary>
    public class ViewModelBase : System.ComponentModel.INotifyPropertyChanged
    {
        public virtual event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// 属性值变化时发生
        /// </summary>
        /// <param name="propertyName"></param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
        /// <summary>
        /// 属性值变化时发生
        /// </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轴数据
        private ChartValues<double> ValueList { get; set; }
        //表中最大容纳个数
        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);
            //向图表中添加数据
            ValueList.Add(yValue);
            //确保Y轴曲线不会超过图表
            int maxY = (int)ValueList.Max();
            AxisYMax = maxY + 30;
            //Y轴保持数据居中(曲线会上下晃动)
            //int minY = ValueList.Count == 1 ? 0 : (int)ValueList.Min();
            //AxisYMin = minY - 10;
            //y轴的设置
            if (ValueList.Count > TabelShowCount)
            {
                AxisXMax = ValueList.Count - 1;
                AxisXMin = ValueList.Count - TabelShowCount;
            }
            //这里如果移除数组,图表曲线会原地起伏,就没有X轴移动的动画效果了
            //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);
        }
    }
}

运行后一直点击测试按钮,就可以看到效果了。

到此这篇关于WPF利用LiveCharts实现动态曲线图绘制的文章就介绍到这了,更多相关WPF LiveCharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于C#制作一个颜色拾取器

    基于C#制作一个颜色拾取器

    这篇文章主要为大家详细介绍了如何基于C#制作一个颜色拾取器,可以获取屏幕上任意位置像素的色值,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2024-01-01
  • C# 实现计算生辰八字

    C# 实现计算生辰八字

    生辰八字,简称八字,是指一个人出生时的干支历日期;年月日时共四柱干支,每柱两字,合共八个字,故称。生辰八字在汉族民俗信仰中占有重要地位,古代汉族星相家据此推算人的命运的好坏。本文我们就来使用C#来实现计算生辰八字。
    2015-03-03
  • 详解C# 不能用于文件名的字符

    详解C# 不能用于文件名的字符

    在 Windows 有一些字符是不能作为文件名,尝试重命名一个文件,输入/ 就可以看到windows 提示的不能作为文件名的字符,那么具体是包括哪些符号不能作为文件名呢?下面小编给大家介绍下
    2018-02-02
  • Winform动态加载TabControl用法实例

    Winform动态加载TabControl用法实例

    这篇文章主要介绍了Winform动态加载TabControl用法,以实例形式详细讲述了Winform动态加载TabControl的方法,在C#应用程序开发中具有一定的实用价值,需要的朋友可以参考下
    2014-11-11
  • C#获取串口列表实现实时监控串口

    C#获取串口列表实现实时监控串口

    本文主要介绍两种获取串口列表的方法,比较简单,方便大家使用,另外分享了一个已封装的API,需要的朋友可以参考下。
    2016-05-05
  • Unity3D Shader实现贴图切换效果

    Unity3D Shader实现贴图切换效果

    这篇文章主要为大家详细介绍了Unity3D Shader实现贴图切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 探秘C# 6.0 的新特性

    探秘C# 6.0 的新特性

    本文的内容包括引入C#6.0中的新的语言特性有哪些. 还有已经被引入的代码名称为 “Roslyn”新编译器. 编译器是开放源码的,并且可以从 codeplex 网站的这个地址下载到源代码:https://roslyn.codeplex.com/.
    2015-03-03
  • C#使用oledb读取excel表格内容到datatable的方法

    C#使用oledb读取excel表格内容到datatable的方法

    这篇文章主要介绍了C#使用oledb读取excel表格内容到datatable的方法,涉及C#操作oledb及datatable的相关技巧,需要的朋友可以参考下
    2015-05-05
  • C#简单生成缩略图的方法

    C#简单生成缩略图的方法

    这篇文章主要介绍了C#简单生成缩略图的方法,涉及C#操作图片的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • c#的sortedlist使用方法

    c#的sortedlist使用方法

    这篇文章主要介绍了c#的sortedlist使用方法,需要的朋友可以参考下
    2014-05-05

最新评论