Avalonia常用小控件Charts

本文介绍了使用Avalonia框架进行UI开发,包括Semi.Avalonia库的链接,以及如何在项目中集成LiveChartsCore.SkiaSharpView.Avalonia库来创建图表,展示了PieChart和CartesianChart的代码示例及统计ViewModel的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.项目下载地址:https://gitee.com/confusedkitten/avalonia-demo
2.UI库Semi.Avalonia,项目地址  https://github.com/irihitech/Semi.Avalonia

3.Charts库,LiveChartsCore.SkiaSharpView.Avalonia,Nuget获取只有预览库,也没找到别的啥好用的库

4.样式预览:

5.Charts.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
			 xmlns:vm="using:AvaloniaDemo.ViewModels"
			 x:Class="AvaloniaDemo.Pages.Charts"
			 x:DataType="vm:StatisticsViewModel">
	<Grid RowDefinitions="*,*">
		<lvc:PieChart Name="ryredpie" FontFamily="Microsoft YaHei" Series="{Binding DamageSeries}" LegendPosition="Right" >
		</lvc:PieChart>
		<lvc:CartesianChart  Name="ryredaxisx" Grid.Row="1"  Series="{Binding VictorySeries}" XAxes="{Binding VictoryXAxes}">
			<lvc:CartesianChart.Tooltip>
				<vm:CustomTooltip></vm:CustomTooltip>
			</lvc:CartesianChart.Tooltip>
		</lvc:CartesianChart>
	</Grid>
</UserControl>

6.Charts.axaml.cs 

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using AvaloniaDemo.ViewModels;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView.SKCharts;
using SkiaSharp;
using System.Reflection.Metadata;

namespace AvaloniaDemo.Pages;

public partial class Charts : UserControl
{
    public const string DefaultFontFamily = "Microsoft YaHei";
    private StatisticsViewModel viewModel = new StatisticsViewModel(new SolidColorPaint(SKColor.Parse("#4992FF")));
    public Charts()
    {
        InitializeComponent();
        DataContext = viewModel;
        InitLegend();
    }

    /// <summary>
    /// 改图例字体,默认不支持中文
    /// </summary>
    private void InitLegend()
    {
        try
        {
            if (ryredpie.Legend is SKDefaultLegend skDefaultLegend)
            {
                skDefaultLegend.TextSize = 13;
                if (skDefaultLegend.FontPaint is Paint paint)
                {
                    paint.FontFamily = Constant.DefaultFontFamily;
                    paint.Color = new SKColor(255, 255, 255);
                }
            }
            if (ryredpie.Tooltip is SKDefaultTooltip skDefaultTooltip)
            {
                if (skDefaultTooltip.FontPaint is Paint paint)
                {
                    paint.FontFamily = Constant.DefaultFontFamily;
                    paint.Color = new SKColor(255, 255, 255);
                }
            }
            ryredpie.TooltipPosition = TooltipPosition.Right;
        }
        catch { }
    }
}

 7.StatisticsViewModel.cs

using LiveChartsCore.Drawing;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore;
using SkiaSharp;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Reflection.Metadata;
using System.Text;
using System.Threading.Tasks;

namespace AvaloniaDemo.ViewModels
{
    public class StatisticsViewModel : ViewModelBase
    {
        SolidColorPaint _solidColor { get; set; } = new SolidColorPaint(SKColor.Parse("#4992FF"));
        public StatisticsViewModel(SolidColorPaint solidColor)
        {
            _solidColor = solidColor;
            ((ColumnSeries<int>)_VictorySeries.ElementAt(0)).Fill = _solidColor;
        }

        public StatisticsViewModel()
        {
        }
        /// <summary>
        /// 饼图内径
        /// </summary>
        public static int PieInnerRadius = 35;

        #region 统计

        public Axis[] VictoryXAxes { get; set; } =
        {
            new Axis
            {
                Labels = new[] { "正常", "轻伤", "中伤", "重伤", "死亡" },
                LabelsRotation = 0,
                LabelsPaint=new SolidColorPaint(new SKColor(255, 255, 255))
                {
                    FontFamily="Microsoft YaHei",
                },
                TextSize=12,
                LabelsAlignment=Align.Middle,
                TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),
                TicksAtCenter = true,
                MinStep = 1,
                ForceStepToMin = true,
            }
        };

        private ObservableCollection<ISeries> _VictorySeries = new ObservableCollection<ISeries>
         {
             new ColumnSeries<int> { Values = new int[] { 5,8,1,0,9 },Fill=  new SolidColorPaint(SKColor.Parse("#4992FF"))},
         };

        private ISeries[] _DamageSeries = new ISeries[]
         {
             new PieSeries<int> { Values = new int[] { 2 }, Name = "正常" ,InnerRadius=PieInnerRadius, Fill=  new SolidColorPaint(SKColor.Parse("#008000"))},
             new PieSeries<int> { Values = new int[] { 4 }, Name = "轻伤" ,InnerRadius=PieInnerRadius, Fill=  new SolidColorPaint(SKColor.Parse("#D2C86B")) },
             new PieSeries<int> { Values = new int[] { 1 }, Name = "中伤" ,InnerRadius=PieInnerRadius, Fill=  new SolidColorPaint(SKColor.Parse("#03AEDE")) },
             new PieSeries<int> { Values = new int[] { 4 }, Name = "重伤" ,InnerRadius=PieInnerRadius, Fill=  new SolidColorPaint(SKColor.Parse("#C13530")) },
             new PieSeries<int> { Values = new int[] { 3 }, Name = "死亡" ,InnerRadius=PieInnerRadius, Fill=  new SolidColorPaint(SKColor.Parse("#696969")) }
         };

        public ObservableCollection<ISeries> VictorySeries
        {
            get => _VictorySeries;
            set => RaiseAndSetIfChanged(ref _VictorySeries, value);
        }

        public ISeries[] DamageSeries
        {
            get => _DamageSeries;
            set => RaiseAndSetIfChanged(ref _DamageSeries, value);
        }

        #endregion
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值