手把手教你搭WPF架构之LiveCharts.Wpf的简单使用

arriettyandray
1,271 阅读4分钟

前言

根据项目需求，我单独留了一个界面用于进行数据分析。数据分析的内容考虑是采用图表的形式将SQLite数据库中存储的数据进行绘制成图，以便数据分析。今天简单介绍一下LiveCharts.wpf以及使用前的安装步骤介绍！

LiveCharts.Wpf介绍

LiveCharts.Wpf是一个开源的图表库，封装了丰富的图表，同时具备一定的自主定义的设计，使用者可以根据自己的需求进行更改。 图表类型：折线图、柱状图、饼图、散点图、面积图、雷达图、热力图、组合图等。（后续将详细介绍折线图的使用） 动画效果：图表中可配制动画效果，根据需要进行设计。 数据绑定：支持WPF的数据绑定机制，将图表与数据源绑定（后续结合数据绑定进行介绍）。 了解以上内容，让我们先安装LiveCharts.Wpf吧！

LiveCharts.Wpf的安装

为了后续使用LiveCharts.Wpf，下面介绍一下LiveCharts.Wpf的安装步骤！

  • 步骤一

image.png 这里需要介绍一下，C#中的目标框架使用区别。一般我们会使用两种框架，一种是.Net x.0框架，这种框架一般可以跨平台进行开发，支持云应用、移动应用、桌面应用等多种应用类型，是开源的。；一种是.Net framework框架，是专门为专为 Windows 操作系统设计的，它提供了丰富的类库和工具，用于开发 Windows 应用程序、Web 应用程序和服务，并且需要注意只能用于Windows 操作系统，是专有的。

所以要注意了！ 在使用过程中，如果使用.Net framework目标框架，就在引用部分进行右击选择程序包；如果使用.Net X.0，那么就在依赖项中进行右击选择程序包。

  • 步骤二 在这里插入图片描述 在浏览栏下面搜索LiveCharts.Wpf安装包，并安装。安装完成，就会在刚刚的引用或者依赖项中看到已安装好的程序包了。这里的安装也需要根据目标框架进行安装，否则安装失败，不适用！

image.png

  • 步骤三 简单使用就是在界面前端添加对应的安装包说明。

image.png

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

Model

新建Model文件，定义数据写入的对象。而这里需要注意，livechart有对应的用于存储图表数据的类，可以使用ChartValues进行定义。

public ChartValues<double> Num { get; set; } = new ChartValues<double>();

ViewModel

新建ViewModel文件，在这里新建一个Model实例，这里的实例可以调用到刚刚Model中定义的对象Num。后续使用Datamodel.Num来进行赋值。

public Model Datamodel { get; set; } = new Model();

除了这个定义，我们在这里对Datamodel需要赋值。这里为了演示，简单使用Random随机变量给Num进行赋值。

Random random = new Random();
Datamodel.Num.Add(random.Next(0, 100));

View

界面设计

<lvc:CartesianChart>
    <lvc:CartesianChart.Series>
        <lvc:LineSeries Values="{Binding Datamodel.Num}" />
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

这里我们定义了一个折线图，然后对折线图的Values进行数据绑定，绑定我们已经定义好的数据Num。 这里需要注意数据绑定的使用，关注绑定的层级问题。如果使用ViewModel的形式，界面实例化ViewModel，那么界面的数据来源就是ViewModel的实例定义，也就是我们在ViewModel实例化使用的Datamodel。因此界面上直接使用到Datamodel这一层，而不是ViewModel这一层。这里注意着实际数据绑定的层级，否则定义出错，会影响数据显示！

界面后端

this.DataContext = new DataViewModel();

这里是给界面进行数据输入的来源，很多时候忘记这一步。如果缺少这一步，界面就缺少数据来源，不会实现数据绑定！

效果

image.png 这里的数据与随机生成数据的程序有一点点的出入，我在ViewModel中读取了SQLite数据库表中的价格信息，通过界面按钮切换后，会主动更新折线图的数据。 在ViewModel中可以将Datamodel.Num的数据来源替换成读取SQLite数据库中表的数据，就可以完成价格数据的展现！

总结

以上就是今天要讲的内容，本文简单介绍了LiveCharts的安装和使用！

avatar
文章
阅读
粉丝