LiveCharts2:简单灵活交互式且功能强大的.NET图表库

29 篇文章 2 订阅

前言

之前的文章中提到过ScottPlot、与oxyplot,这两个是比较常用的.NET图表库,今天介绍一款新的.NET图表库:LiveCharts2。

LiveCharts2介绍

LiveCharts2 是一个现代化的数据可视化库,用于创建动态和交互式图表,支持 .NET 平台。它是 LiveCharts 的进化版,旨在提供更高性能、更灵活和更易于使用的图表解决方案。LiveCharts2 支持多种图表类型,包括折线图、柱状图、饼图、散点图等,适用于各种数据展示需求。

该库采用 MVVM(Model-View-ViewModel)设计模式,方便开发者在应用中进行数据绑定和动态更新。LiveCharts2 强调性能优化,能够处理大量数据并提供流畅的交互体验。

GitHub上的介绍如下:

Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP.

简单、灵活、交互式且功能强大,适用于 .NET的图表、地图和仪表库,现在可以在 Maui、Uno Platform、Blazor-wasm、WPF、WinForms、Xamarin、Avalonia、WinUI、UWP上运行。

截止写这篇文章,该项目获得了4k个Starts。

image-20240618082958171

简单使用

画折线图

安装NuGet包:

image-20240618083733291

需要点击包含预发行版才会出现。

在ViewModel中添加一个Series属性,如下所示:

 public partial class LiveChart2DemoViewModel : ObservableObject
 {
     public ISeries[] Series { get; set; }
        = new ISeries[]
        {
               new LineSeries<double>
               {
                         Values = new double[] { 2, 1, 3, 5, 3, 4, 6 },
                         Fill = null
               }
        };
 }

在xaml页面,添加命名空间,如下所示:

xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"

添加控件:

 <lvc:CartesianChart
        Series="{Binding Series}">
 </lvc:CartesianChart>

最后不要忘了设置页面的DataContext,如下所示:

 public partial class LiveCharts2Demo : Window
 {
     public LiveCharts2Demo()
     {
         InitializeComponent();
         this.DataContext = new LiveChart2DemoViewModel();
     }
 }

实现效果如下:

image-20240618084340410

画饼图

将Series属性修改为:

 public ISeries[] Series { get; set; }
       = new ISeries[]
       {
         new PieSeries<double> { Values = new double[] { 2 } },
         new PieSeries<double> { Values = new double[] { 4 } },
         new PieSeries<double> { Values = new double[] { 1 } },
         new PieSeries<double> { Values = new double[] { 4 } },
         new PieSeries<double> { Values = new double[] { 3 } }
       };

添加控件:

<lvc:PieChart
    Series="{Binding Series}">
</lvc:PieChart>

效果如下所示:

image-20240618084952398

画极坐标图

将Series属性修改为:

public ISeries[] Series { get; set; } = new[]
        {
            new PolarLineSeries<double>
            {
                Values = new double[] { 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 },
                Fill = null,
                IsClosed = false
            }
        };

添加控件:

 <lvc:PolarChart
       Series="{Binding Series}">
 </lvc:PolarChart>

效果如下所示:

image-20240618085846273

更多示例可见官网:

image-20240618090119187

image-20240618090142712

image-20240618090209510

image-20240618090229147

image-20240618090245260

image-20240618090444553

image-20240618090511874

image-20240618090538301

image-20240618090559277

image-20240618090634897

image-20240618090652135

image-20240618090714760

官网提供了多种多样的样式,可以根据自己的需求,去官网上选择合适的图表样式。

参考

1、beto-rodriguez/LiveCharts2: Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP. (github.com)

2、LiveCharts - LiveCharts2

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 ASP.NET Core Web 项目中利用 Vue.js 构建交互式的前端用户界面,您可以按照以下步骤进行操作: 1. 初始化 Vue.js 项目:使用 Vue CLI 初始化一个新的 Vue.js 项目。您可以按照前面提到的步骤,在 ASP.NET Core Web 项目的根目录下运行命令 `vue create clientApp` 来初始化一个名为 `clientApp` 的 Vue.js 项目。 2. 开发 Vue 组件:在 Vue.js 项目中,您可以使用 Vue 组件来构建交互式的前端界面。在 `clientApp` 文件夹中,您可以使用任何喜欢的文本编辑器或开发工具编写 Vue 组件。Vue 组件由模板、脚本和样式组成,您可以将它们组合起来形成一个可重用的 UI 组件。 3. 将 Vue 组件集成到 Razor 页面中:在 ASP.NET Core Web 项目中,您可以通过 Razor 页面将 Vue 组件嵌入到前端用户界面中。在 Razor 页面中,您可以使用 `<script>` 标签引入 Vue.js 和您的 Vue 组件。然后,将 Vue 组件放置在需要的位置,并通过 Vue 实例进行渲染。 4. 处理交互和数据:通过 Vue 组件,您可以处理用户交互和数据操作。Vue 提供了丰富的指令和事件处理机制,使您能够响应用户输入、发送请求、更新数据等操作。您可以在 Vue 组件中定义方法和计算属性来处理这些交互和数据操作。 5. 调试和测试:在开发过程中,您可以使用浏览器的开发者工具来调试 Vue 组件和查看数据的变化。此外,您还可以使用 Jest、Mocha 等测试框架来编写和运行单元测试,确保 Vue 组件的正确性和可靠性。 通过以上步骤,您可以在 ASP.NET Core Web 项目中利用 Vue.js 的强大功能,构建交互式的前端用户界面。Vue.js 提供了丰富的工具和特性,使您能够以一种更简洁、高效和可维护的方式开发前端界面。同时,ASP.NET Core 提供了强大的后端支持,使您能够轻松地将前端和后端整合在一起,构建完整的 Web 应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值