WPF -- LiveCharts的使用和源码

LiveCharts 是一个开源的 .NET 图表库,特别适用于 WPF、WinForms 和其他 .NET 平台。它提供了丰富的图表类型和功能,使开发者能够轻松地在应用程序中创建动态和交互式图表。下面我将使用WPF平台创建一个测试实例。

一、LiveCharts的安装和使用

1.安装NuGet程序包

  • 右键项目,点击管理 NuGet程序包

  • 搜索LiveCharts并安装LiveCharts.WPF程序包

2.LiveCharts的功能

博主讲解了多种图表的使用:

WPF—LiveCharts图表_wpf livecharts-CSDN博客

  1. 折线图 (Line Chart)
  2. 柱状图 (Column Chart)
  3. 条形图 (Bar Chart)
  4. 面积图 (Area Chart)
  5. 圆饼图 (Pie Chart)
  6. 雷达图 (Radar Chart)
  7. 散点图 (Scatter Chart)
  8. 组合图 (Combination Chart)
  9. K线图 (Candlestick Chart)
  10. 子图 (Subcharts)

其他功能

  • 动态图表: 支持实时数据更新。
  • 动画效果: 提供平滑的过渡动画。
  • 自定义样式: 可以根据需求自定义颜色、样式和标签格式。
  • 交互功能: 支持缩放、平移等用户交互。

二、折线图实例

注意:在本过程中我使用了 CommunityToolkit 程序包,通过它直接使用了MVVM模式架构(安装如下图的程序安装包即可)。

文件夹

1.ViewModel.cs

下面代码已加详细的注释。

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using LiveCharts;
using LiveCharts.Wpf;
using System.Timers;
using System.Windows.Media;namespace LiveCharts实验.ViewModels
{public partial class 折线图ViewModel : ObservableObject{#region 属性声明public SeriesCollection LineSeriesCollection { get; set; } //SeriesCollection 是 LiveCharts 提供的类,用于存放多个数据系列public Func<double, string> CustomFormatterX { get; set; } //格式化 X 轴的标签。可以自定义显示的格式public Func<double, string> CustomFormatterY { get; set; } //格式化 Y 轴的标签。可以自定义显示的格式private double axisXMax;public double AxisXMax //X轴的最大显示范围{get { return axisXMax; }set { axisXMax = value; this.OnPropertyChanged("AxisXMax"); }}private double axisXMin;public double AxisXMin //X轴的最小值{get { return axisXMin; }set { axisXMin = value; this.OnPropertyChanged("AxisXMin"); }}private double axisYMax;public double AxisYMax //Y轴的最大显示范围{get { return axisYMax; }set{axisYMax = value;this.OnPropertyChanged("AxisYMax");}}private double axisYMin;public double AxisYMin //Y轴的最小值{get { return axisYMin; }set { axisYMin = value; this.OnPropertyChanged("AxisYMin");}}private System.Timers.Timer timer = new System.Timers.Timer(); //声明一个定时器实例private Random Randoms = new Random(); //随机数生成器private int TabelShowCount = 10; //表示在图表中显示的最大点数   private List<ChartValues<double>> ValueLists { get; set; } //存储 Y 轴的数据点private List<Axis> YAxes { get; set; } = new List<Axis>();private string CustomFormattersX(double val) //格式化 X 轴的标签{return string.Format("{0}", val); //可以初始化为时间等}private string CustomFormattersY(double val) //格式化  Y 轴的标签{return string.Format("{0}", val);}#endregionpublic 折线图ViewModel(){AxisXMax = 10; //初始化X轴的最大值为10AxisXMin = 0; //初始化X轴的最小值为0AxisYMax = 10; //初始化Y轴的最大值为10AxisYMin = 0; //初始化Y轴的最小值为0ValueLists = new List<ChartValues<double>> // 初始化六个数据曲线的值集合{new ChartValues<double>(),new ChartValues<double>(),new ChartValues<double>(),new ChartValues<double>(),new ChartValues<double>(),new ChartValues<double>()};LineSeriesCollection = new SeriesCollection(); //创造LineSeriesCollection的实例CustomFormatterX = CustomFormattersX; //设置X轴自定义格式化函数CustomFormatterY = CustomFormattersY; //设置Y轴自定义格式化函数var colors = new[] //初始化一个颜色数组供线条颜色使用{Brushes.Red,Brushes.Green,Brushes.Blue,Brushes.Orange,Brushes.Purple,Brushes.Teal};for (int i = 0; i < 6; i++) // 创建六个 LineSeries 并添加到LineSeriesCollection集合中{LineSeries lineseries = new LineSeries{Title = $"曲线 {i + 1}", // 设置曲线名称DataLabels = false, // 数据标签不可见Values = ValueLists[i], // Y 轴数值绑定到相应的 ValueListStrokeThickness = 3, // 设置线条的宽度PointGeometrySize = 8, // 设置数据点的大小LineSmoothness = 0.5, // 设置折线的弯折度 (0: 直线, 1: 完全平滑)Stroke = colors[i % colors.Length], // 设置每条曲线的颜色Fill = Brushes.Transparent // 去掉阴影};LineSeriesCollection.Add(lineseries); // 添加到 LineSeriesCollection 中}timer.Interval = 1000; //设置定时器间隔为1000毫秒,即1秒触发一次定时器订阅的事件timer.Enabled = false; //定时器初始未打开,需要手动打开timer.Elapsed += 打开定时器了; //定时器打开订阅的事件AppDomain.CurrentDomain.ProcessExit += OnProcessExit; //定时器关闭订阅的事件}[RelayCommand]private void 添加数据(){for (int i = 0; i < ValueLists.Count; i++)  // 为每条曲线生成一个随机的 Y 值并添加{int yValue = Randoms.Next(2, 1000); // 生成随机数ValueLists[i].Add(yValue); // 向对应的曲线添加数据}int maxY = (int)ValueLists.Select(v => v.Max()).Max(); // 获取所有曲线的最大值AxisYMax = maxY + 30; // 将 Y 轴的最大值设置为这个最大值加上 30if (ValueLists[0].Count > TabelShowCount) // 仅检查第一条曲线的数据点数量{AxisXMax = ValueLists[0].Count - 1; // X 轴最大值AxisXMin = ValueLists[0].Count - TabelShowCount; // X 轴最小值}}[RelayCommand]private void 定时添加数据(){if (timer.Enabled == false) //判断定时器是否是打开状态,如果没有打开就打开定时器添加数据;{timer.Start();}   else{timer.Stop(); //如果已经打开定时器,那么这次点击按钮就是关闭定时器,停止添加数据timer.Dispose();}}private void 打开定时器了(object sender, ElapsedEventArgs e) //定时器打开后订阅的事件{for (int i = 0; i < ValueLists.Count; i++)  // 为每条曲线生成一个随机的 Y 值并添加{int yValue = Randoms.Next(2, 1000); // 生成随机数ValueLists[i].Add(yValue); // 向对应的曲线添加数据}int maxY = (int)ValueLists.Select(v => v.Max()).Max(); // 获取所有曲线的最大值AxisYMax = maxY + 30; // 将 Y 轴的最大值设置为这个最大值加上 30if (ValueLists[0].Count > TabelShowCount) // 仅检查第一条曲线的数据点数量{AxisXMax = ValueLists[0].Count - 1; // X 轴最大值AxisXMin = ValueLists[0].Count - TabelShowCount; // X 轴最小值}}private void OnProcessExit(object? sender, EventArgs e) //进程退出时订阅的事件{try{timer.Stop(); //关闭定时器timer.Dispose(); //释放资源}catch { }}}
}

2.View.xaml.cs

using LiveCharts实验.ViewModels;
using System.Windows;namespace LiveCharts实验.Views
{public partial class 折线图View : Window{private 折线图ViewModel ViewModel = new 折线图ViewModel();public 折线图View(){InitializeComponent();DataContext = ViewModel;}}
}

3.View.xaml

<Window x:Class="LiveCharts实验.Views.折线图View"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"xmlns:local="clr-namespace:LiveCharts实验.Views"mc:Ignorable="d"Title="折线图View" Width="1700" Height="1400"><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"Command="{Binding 添加数据Command}"/><Button Content="定时添加数据" Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="95"Command="{Binding 定时添加数据Command}" /></Grid><Grid Grid.Row="1"><lvc:CartesianChart Series="{Binding LineSeriesCollection}" LegendLocation="Right" AnimationsSpeed="00:00:00.500"Zoom ="Xy"Pan="X"><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 Foreground="red"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis><lvc:Axis Foreground="Green"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis><lvc:Axis Foreground="Blue"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis><lvc:Axis Foreground="Orange"Position="RightTop"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis><lvc:Axis Foreground="Purple"Position="RightTop"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis><lvc:Axis Foreground="Teal"Position="RightTop"MaxValue="{Binding AxisYMax}" MinValue="{Binding AxisYMin}"></lvc:Axis></lvc:CartesianChart.AxisY></lvc:CartesianChart></Grid></Grid>
</Window>

解释:

<lvc:CartesianChart>: 创建了一个二维 Cartesian 图表。

  • Series="{Binding LineSeriesCollection}": 绑定图表的数据系列集合到 LineSeriesCollection。这个集合在 ViewModel 中定义。
  • LegendLocation="Right": 指定图例的位置在右侧。
  • AnimationsSpeed="00:00:00.500":动画的速度。
  • DrawMargin="{Binding ChartMargin}":图表边距(代码中无)
  • Zoom="Xy": 允许用户在 X 和 Y 轴上进行缩放。
  • Pan="X": 允许用户在 X 轴上拖动(平移)。

<lvc:CartesianChart.AxisX>: 定义 X 轴的属性。

  • LabelFormatter="{Binding CustomFormatterX}": 绑定 X 轴标签格式化函数到 CustomFormatterX,用于自定义标签的显示格式(例如:显示为“天”)。
  • MaxValue="{Binding AxisXMax}"MinValue="{Binding AxisXMin}": 绑定 X 轴的最大和最小值,以动态控制显示范围。
  • <lvc:Axis.Separator>: 定义网格线的分隔符。
    • <lvc:Separator Step="1" />: 设置网格线的间隔为 1。

<lvc:CartesianChart.AxisY>: 定义 Y 轴的属性。

  • 多个 <lvc:Axis> 元素: 你定义了多个 Y 轴,分别为红色、绿色、蓝色、橙色、紫色和青色。每条曲线使用不同的 Y 轴,这通常用于不同数据范围的曲线。
  • Foreground 属性: 设置 Y 轴标签和网格线的颜色。
  • Position 属性: 设置了部分 Y 轴在右上角。这个属性用于控制 Y 轴的位置(默认是在左侧)。

在此处多个Y轴应该与使用中的数据绑定好。

4.实验结果

4.1.通过按钮添加曲线数据集单个数据

4.2.定时添加多个数据并动态显示

三、柱状图实例

1.ViewModel.cs

using LiveCharts.Wpf;
using LiveCharts;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;namespace LiveCharts实验.ViewModels
{public partial class 柱状图ViewModel : ObservableObject{#region 属性声明private SeriesCollection _columnValues;public SeriesCollection ColumnValues{get { return _columnValues; }set{_columnValues = value;OnPropertyChanged(nameof(ColumnValues));}}private string[] _axisXLabels = { "A", "B", "C", "D" };public string[] AxisXLabels{get { return _axisXLabels; }}private Random 随机索引 = new Random(); //随机数生成器private Random Randoms = new Random(); //随机数生成器#endregionpublic 柱状图ViewModel(){ColumnValues = new SeriesCollection // 初始化时创建柱状图数据{new ColumnSeries{Title = "数据集 1",Values = new ChartValues<double> { 0, 1, 2, 3 }},new ColumnSeries{Title = "数据集 2",Values = new ChartValues<double> { 4, 5, 6, 7 }},new ColumnSeries{Title = "数据集 3",Values = new ChartValues<double> { 8, 9, 10, 11 }}};}public void UpdateData(int index, int datasetIndex, double value) // 更新某个横坐标某个数据集的数据{if (index < 0 || index >= _axisXLabels.Length)throw new ArgumentOutOfRangeException(nameof(index), "索引超出范围");if (datasetIndex < 0 || datasetIndex >= ColumnValues.Count)throw new ArgumentOutOfRangeException(nameof(datasetIndex), "数据集索引超出范围");ColumnValues[datasetIndex].Values[index] = value; // 更新指定横坐标和数据集的数据OnPropertyChanged(nameof(ColumnValues)); // 通知数据已更新}[RelayCommand]private void 添加数据() //点击按键之后向随机索引的某一个数据添加一个随机数{UpdateData(随机索引.Next(0,4), 随机索引.Next(0,2), Randoms.Next(0,999));}}
}

2.View.xaml.cs

using LiveCharts实验.ViewModels;
using System.Windows;namespace LiveCharts实验.Views
{public partial class 柱状图View : Window{private 柱状图ViewModel viewModel = new 柱状图ViewModel();public 柱状图View(){InitializeComponent();DataContext = viewModel;}}
}

3.View.xaml

<Window x:Class="LiveCharts实验.Views.柱状图View"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:lv="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"xmlns:local="clr-namespace:LiveCharts实验.Views"mc:Ignorable="d"Title="柱状图View" Height="1450" Width="1600"><Grid><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="*"/></Grid.RowDefinitions><Button Content="添加数据" Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="95"Command="{Binding 添加数据Command}" /><lv:CartesianChart Series="{Binding ColumnValues}" Grid.Row="1"LegendLocation="Right"><lv:CartesianChart.AxisX><lv:Axis Title="类别" Labels="{Binding AxisXLabels}"/></lv:CartesianChart.AxisX><lv:CartesianChart.AxisY><lv:Axis Title="值"/></lv:CartesianChart.AxisY></lv:CartesianChart></Grid>
</Window>

4.实验结果

添加随机数后。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/56237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE-鼠标移入到目标区域变成小手形状

工作中有个场景&#xff1a;当鼠标移动到某个区域时显示为“小手”状 其实这个东西特别简单&#xff0c;只是用的不多平常。 我们只需要给目标区域的style样式中加入【cursor: pointer;】这个鼠标就好了。 <span class"el-dropdown-link">下载 </span>…

软件测试与软件缺陷的基础知识

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

计算机视觉之可做什么

1、计算机视觉的应用 计算机视觉在我们生活中已经有了很广泛的应用&#xff0c;在我们可见、不可见&#xff1b;可感知、不可感知的地方&#xff0c;深深地影响了我们的生活、生产方式。 日常生活&#xff1a;美颜相机、火车站刷脸进站、线上办理业务的身份认证、自动驾驶等等…

供应链PC实操落地实践|得物技术

目录 一、背景 二、实操模式 三、快捷码设计和使用 1. 快捷码布局 2. 快捷码的准确识别 3. 快捷码的高亮反馈 4. 快捷码打印和黏贴建议 四、问题复盘 1. 基准体验的梳理 五、实操环境检测 1. 实操环境的安装和配置 2. 实操环境检测能力的使用流程 3. 实操检测能力的技术架构 4.…

Vue 3 数组变更详解:哪些操作会修改原数组?| 笔记

Vue 3 使用 Proxy 来侦测响应式对象的变化&#xff0c;数组作为常用数据类型&#xff0c;自然也被 Vue 3 自动侦测和管理。在处理数组时&#xff0c;了解哪些操作会修改原数组&#xff0c;哪些操作不会修改原数组&#xff0c;对高效编写 Vue 应用程序至关重要。 本文将详细介绍…

LeetCode 面试经典150题 Z字形变换

题目&#xff1a; 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 "PAYPALISHIRING" 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你…

windows recvfrom错误10014

使用windows socket的udp客户端与linux udp服务端通讯&#xff0c;windows发送数据正常&#xff0c;接收偶尔不正常&#xff0c;但是通过抓包发现服务端是发送了数据给客户端的&#xff0c;网上找了很急都没解决&#xff0c;最后发现是windows与linux下 recvfrom 最后一个参数有…

CSS——文字打字机效果

CSS——文字打字机效果 本文通过纯 CSS 实现文字的打字机效果&#xff0c;然后借助 JS 实现了扩展。 typewriter 基本思路 使用伪元素覆盖原文字&#xff0c;并且使用伪元素模拟闪烁的光标效果。 具体流程 首先是一些基本的设置 <!DOCTYPE html> <html lang"…

什么是Qseven?模块电脑(核心板)规范标准简介二

1.概念 Qseven是一种通用的、小尺寸计算机模块标准&#xff0c;适用于需要低功耗、低成本和高性能的应用。 Qseven模块电脑&#xff08;核心板&#xff09;采用230Pin金手指连接器 2.Qseven的起源 Qseven最初是由Congatec、SECO、MSC三家欧洲公司于2008年发起&#xff0c;旨在…

Python中的SQLAlchemy:解锁数据库操作的新世界

引言 SQLAlchemy是一个Python SQL工具包和ORM&#xff0c;它提供了全面的企业级持久性模式。通过SQLAlchemy&#xff0c;你可以使用Python类来定义数据库表&#xff0c;并使用面向对象的方式来进行数据库操作&#xff0c;如查询、更新等。这种ORM方法不仅使代码更加简洁易读&a…

基因科技领军企业——桐树基因完成D轮融资,创新科技引领生命科学

2024年10月8日&#xff0c;无锡桐树生物科技有限公司&#xff08;以下简称桐树基因&#xff09;正式完成过亿元人民币D轮融资。本轮融资由无锡市梁溪科创产业投资基金&#xff08;博华资本管理&#xff09;领投&#xff0c;江苏建道创业投资有限公司跟投&#xff0c;总额过亿元…

简单谈谈Spring 中Aware是什么

在spring中&#xff0c;aware是spring提供的一种扩展机制 在一般情况中&#xff0c;是不需要感知容器的存在的&#xff0c;spring 会帮我们自动装配完成。 但是在一些特定的场景下&#xff0c;比如我需要获取spring容器中的某个对象&#xff0c;那么就需要获取到 spring 上下文…

大数据学习---快速了解clickhouse数据库

ClickHouse数据库介绍 ClickHouse是一款由Yandex开发的列式数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;适用于在线分析处理&#xff08;OLAP&#xff09;场景。它具有高性能、可扩展性、实时更新等特点&#xff0c;适用于处理大规模数据。 特点 列式存储&#x…

【数据结构】二叉树(一)遍历

导言 前面以及有了堆的基础&#xff0c;现在来学习二叉树。二叉树的学习和前面的数据结构很不一样&#xff0c;前面我们主要学习用数据结构储存数据&#xff0c;以及实际手搓数据结构的增删查改&#xff1b;而学习二叉树主要是为我们以后学搜索二叉树以及后面的AVL树等数据结构…

Android中的View绘制流程

Android中的View绘制流程是一个复杂而精细的过程&#xff0c;它确保了应用程序中的用户界面能够准确、高效地呈现在用户眼前。以下将详细阐述Android View的绘制流程&#xff0c;包括测量&#xff08;Measure&#xff09;、布局&#xff08;Layout&#xff09;和绘制&#xff0…

2024.10.10计算机外部设备及调试培训

授课老师&#xff1a;杨戬 1.计算机组成 cpu&#xff0c;主板&#xff0c;内存&#xff0c;硬盘&#xff0c;电源&#xff0c;显示器&#xff0c;键盘和鼠标&#xff0c;光驱和显卡&#xff0c;其他外部设备。 2.虚拟机专业版转换 由于我们在2024.10.8的培训中已经安装了wi…

GPT4o,GPTo1-preview, 拼

兄弟们GPT刚开的 需要上车的扣&#xff0c;工作用 大家一起PIN分摊点压力。 在当今数字化的时代&#xff0c;程序员这一职业已经从幕后走到了前台&#xff0c;成为推动科技进步和社会变革的关键力量。编写代码、解决问题、不断学习新技术&#xff0c;程序员们的日常充满了挑战与…

React基础知识

说明&#xff1a;react版本为 18.3.1 React是什么 React由Meta公司研发&#xff0c;是一个用于构建Web和原生交互界面的库。&#xff08;开发基于浏览器的web应用和基于mac和android的移动应用&#xff09;React的优势 1.相较于传统基于DOM开发的优势&#xff1a;组件化的开…

【物流配送中心选址问题】基于退火算法混合粒子群算法

课题名称&#xff1a; 基于退火算法混合粒子群算法的物流配送中心选址问题 改进方向&#xff1a;模拟退火算法优化粒子群算法 代码获取方式&#xff08;付费&#xff09;&#xff1a; 模型说明&#xff1a; 待补充 Matlab仿真结果&#xff1a; 1. 模型优化后的仿真结果 2…

Java入门:11.抽象类,接口,instanceof,类关系,克隆

1 JDK中的包 JDK JRE 开发工具集&#xff08;javac.exe&#xff09; JRE JVM java类库 JVM java 虚拟机 jdk中自带了许多的包&#xff08;类&#xff09; &#xff0c; 常用的有 java.lang 该包中的类&#xff0c;不需要引用&#xff0c;可以直接使用。 例如&#xff1…