前言
今天大姚给大家分享一个.NET开源(MIT License)、功能强大、简单、灵活、跨平台的图表、地图和仪表库:LiveCharts2。
项目介绍
LiveCharts2是一个.NET开源、简单、灵活、交互式且功能强大的.NET图表、地图和仪表,现在几乎可以在任何地方运行如:Maui、Uno Platform、Blazor-wasm、WPF、WinForms、Xamarin、Avalonia、WinUI、UWP。
项目源代码
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支持💖。
优秀项目和框架精选
该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中,关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践,提高开发工作效率和质量。坑已挖,欢迎大家踊跃提交PR推荐或自荐(让优秀的项目和框架不被埋没🤞)。
DotNetGuide技术社区交流群
- DotNetGuide技术社区是一个面向.NET开发者的开源技术社区,旨在为开发者们提供全面的C#/.NET/.NET Core相关学习资料、技术分享和咨询、项目框架推荐、求职和招聘资讯、以及解决问题的平台。
- 在DotNetGuide技术社区中,开发者们可以分享自己的技术文章、项目经验、学习心得、遇到的疑难技术问题以及解决方案,并且还有机会结识志同道合的开发者。
- 我们致力于构建一个积极向上、和谐友善的.NET技术交流平台。无论您是初学者还是有丰富经验的开发者,我们都希望能为您提供更多的价值和成长机会。