avalonia 制作柱状图

### 如何在 Avalonia UI 中创建柱状图 为了在 Avalonia UI 框架中实现柱状图功能，可以利用第三方库如 OxyPlot 或 LiveCharts 来简化图表绘制过程。以下是基于 OxyPlot 的具体方法： #### 添加 NuGet 包依赖项 首先，在解决方案资源管理器中右键点击项目并选择“管理Nuget包”，搜索 `OxyPlot.Avalonia` 并安装。 ```xml <ItemGroup> <PackageReference Include="OxyPlot.Avalonia" Version="2.0.0"/> </ItemGroup> ``` #### 创建 XAML 文件定义布局结构 编辑 MainWindow.xaml 文件以设置界面元素的位置和样式[^1]。 ```xaml <Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:oxy="clr-namespace:OxyPlot.Avalonia;assembly=OxyPlot.Avalonia"> <!-- 定义一个 PlotView 控件用于显示图表 --> <Grid> <oxy:PlotView Model="{Binding BarChartModel}" /> </Grid> </Window> ``` #### 编写 ViewModel 类处理数据逻辑 接着新建名为 MainViewModel.cs 的文件，并编写如下代码来初始化模型对象及其属性值[^2]。 ```csharp using System; using System.Collections.Generic; using ReactiveUI; public class MainViewModel : ReactiveObject { private readonly List<Tuple<string,double>> _dataPoints = new(){ Tuple.Create("Jan", Math.Round(7 * Random.Shared.NextDouble(), 2)), Tuple.Create("Feb", Math.Round(9 * Random.Shared.NextDouble(), 2)), Tuple.Create("Mar", Math.Round(5 * Random.Shared.NextDouble(), 2)) }; public MainViewModel() => BarChartModel = CreateBarChart(); public PlotModel BarChartModel { get; } private static PlotModel CreateBarChart(){ var model = new PlotModel{Title = "Monthly Sales"}; // 构建系列集合 var seriesCollection = new ColumnSeries{ ItemsSource=_dataPoints.Select(dp=>new ColumnItem((float)dp.Item2)).ToList(), LabelPlacement=LabelPlacements.Inside, StrokeThickness=0d}; foreach (var point in _dataPoints){ seriesCollection.LabelFormatString += $"{point.Item1}\n"; } model.Series.Add(seriesCollection); return model; } } ``` #### 设置 DataContext 关联视图与视图模型 最后一步是在代码隐藏文件（MainWindow.xaml.cs）里指定窗口的数据上下文为刚才创建好的 Viewmodel 实例[^3]。 ```csharp protected override void OnInitialized() { this.DataContext = new MainViewModel(); base.OnInitialized(); } ``` 这样就完成了一个基本的柱状图应用开发流程。当然还可以进一步自定义外观样式、交互效果等内容让图表更加美观实用。