.NET开源、功能强大、跨平台的图表库 - LiveCharts2

net,livecharts2 · 浏览次数 : 16

小编点评

**ViewModel.cs** ```csharp // ColumnSeries data model public class ColumnSeries { public float[] Values { get; set; } public string Stroke { get; set; } public int Padding { get; set; } } // PointMeasured event handler private void OnPointMeasured(ChartPoint point) { // Create animations for each column series var perPointDelay = 100; // milliseconds var delay = point.Context.Entity.MetaData!.EntityIndex * perPointDelay; var speed = (float)point.Context.Chart.AnimationsSpeed.TotalMilliseconds + delay; // Set transition for each series with custom elastic out animation point.Visual?.SetTransition(new Animation(progress => { var d = delay / speed; return progress <= d ? EasingFunctions.BuildCustomElasticOut(1.5f, 0.60f)((progress - d) / (1 - d)) : 0; }, d, TimeSpan.FromMilliseconds(speed))); } ``` **HTML** ```html ``` **项目用途** 该项目是一个 C#/.NET Core 应用程序，用于创建图表。它包含一个 ColumnSeries 数据模型，用于存储图表数据，以及一个 OnPointMeasured 事件处理程序，用于在每个数据点上绘制动画。

正文

前言

今天大姚给大家分享一个.NET开源（MIT License）、功能强大、简单、灵活、跨平台的图表、地图和仪表库：LiveCharts2。

项目介绍

LiveCharts2是一个.NET开源、简单、灵活、交互式且功能强大的.NET图表、地图和仪表，现在几乎可以在任何地方运行如：Maui、Uno Platform、Blazor-wasm、WPF、WinForms、Xamarin、Avalonia、WinUI、UWP。

在线API文档：https://livecharts.dev/docs/blazor/2.0.0-rc2/gallery

项目源代码

Blazor Wasm中快速使用

创建Blazor WebAssembly项目

安装NuGet

NuGet包管理器中搜索：LiveChartsCore.SkiaSharpView.Blazor 点击安装。
复制

注意：该包目前仍处于预发行阶段，尚未有正式版，很多同学反馈说找不到，是因为没有勾选：包括预发行版。

Basic Bars

View Model

using CommunityToolkit.Mvvm.ComponentModel;using LiveChartsCore;using LiveChartsCore.SkiaSharpView;using LiveChartsCore.SkiaSharpView.Painting;using SkiaSharp;namespace ViewModelsSamples.Bars.Basic;public partial class ViewModel : ObservableObject{    public ISeries[] Series { get; set; } =    {        new ColumnSeries<double>        {            Name = "Mary",            Values = new double[] { 2, 5, 4 }        },        new ColumnSeries<double>        {            Name = "Ana",            Values = new double[] { 3, 1, 6 }        }    };    public Axis[] XAxes { get; set; } =    {        new Axis        {            Labels = new string[] { "Category 1", "Category 2", "Category 3" },            LabelsRotation = 0,            SeparatorsPaint = new SolidColorPaint(new SKColor(200, 200, 200)),            SeparatorsAtCenter = false,            TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),            TicksAtCenter = true,            // By default the axis tries to optimize the number of             // labels to fit the available space,             // when you need to force the axis to show all the labels then you must:             ForceStepToMin = true,             MinStep = 1         }    };}
复制

HTML

@page "/Bars/Basic"@using LiveChartsCore.SkiaSharpView.Blazor@using ViewModelsSamples.Bars.Basic<CartesianChart Series="ViewModel.Series" XAxes="ViewModel.XAxes" LegendPosition="LiveChartsCore.Measure.LegendPosition.Right"></CartesianChart>@code { public ViewModel ViewModel { get; set; } = new();}
复制

Delayed Animations

View model

using System;using System.Collections.Generic;using CommunityToolkit.Mvvm.ComponentModel;using LiveChartsCore;using LiveChartsCore.Drawing;using LiveChartsCore.Kernel;using LiveChartsCore.SkiaSharpView;using LiveChartsCore.SkiaSharpView.Drawing.Geometries;namespace ViewModelsSamples.Bars.DelayedAnimation;public partial class ViewModel : ObservableObject{    public ViewModel()    {        var values1 = new List<float>();        var values2 = new List<float>();        var fx = EasingFunctions.BounceInOut; // this is the function we are going to plot        var x = 0f;        while (x <= 1)        {            values1.Add(fx(x));            values2.Add(fx(x - 0.15f));            x += 0.025f;        }        var columnSeries1 = new ColumnSeries<float>        {            Values = values1,            Stroke = null,            Padding = 2        };        var columnSeries2 = new ColumnSeries<float>        {            Values = values2,            Stroke = null,            Padding = 2        };        columnSeries1.PointMeasured += OnPointMeasured;        columnSeries2.PointMeasured += OnPointMeasured;        Series = new List<ISeries> { columnSeries1, columnSeries2 };    }    private void OnPointMeasured(ChartPoint<float, RoundedRectangleGeometry, LabelGeometry> point)    {        var perPointDelay = 100; // milliseconds        var delay = point.Context.Entity.MetaData!.EntityIndex * perPointDelay;        var speed = (float)point.Context.Chart.AnimationsSpeed.TotalMilliseconds + delay;        point.Visual?.SetTransition(            new Animation(progress =>            {                var d = delay / speed;                return progress <= d                    ? 0                    : EasingFunctions.BuildCustomElasticOut(1.5f, 0.60f)((progress - d) / (1 - d));            },            TimeSpan.FromMilliseconds(speed)));    }    public List<ISeries> Series { get; set; }}
复制

HTML

@page "/Bars/DelayedAnimation"@using LiveChartsCore.SkiaSharpView.Blazor@using ViewModelsSamples.Bars.DelayedAnimation<CartesianChart Series="ViewModel.Series"></CartesianChart>@code { public ViewModel ViewModel { get; set; } = new();}
复制

项目更多图表截图

项目源码地址

更多项目实用功能和特性欢迎前往项目开源地址查看👀，别忘了给项目一个Star支持💖。

https://github.com/beto-rodriguez/LiveCharts2

优秀项目和框架精选

该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中，关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践，提高开发工作效率和质量。坑已挖，欢迎大家踊跃提交PR推荐或自荐（让优秀的项目和框架不被埋没🤞）。

https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

DotNetGuide技术社区交流群

DotNetGuide技术社区是一个面向.NET开发者的开源技术社区，旨在为开发者们提供全面的C#/.NET/.NET Core相关学习资料、技术分享和咨询、项目框架推荐、求职和招聘资讯、以及解决问题的平台。
在DotNetGuide技术社区中，开发者们可以分享自己的技术文章、项目经验、学习心得、遇到的疑难技术问题以及解决方案，并且还有机会结识志同道合的开发者。
我们致力于构建一个积极向上、和谐友善的.NET技术交流平台。无论您是初学者还是有丰富经验的开发者，我们都希望能为您提供更多的价值和成长机会。

欢迎加入DotNetGuide技术社区微信交流群👪