C# Avalonia怎么实现一个简单的图表控件 Avalonia图表库

13次阅读

推荐使用 OxyPlot.Avalonia 实现 Avalonia 图表,需安装 OxyPlot.Core 和 OxyPlot.Avalonia,XAML 中通过 PlotView 绑定继承自 PlotModel 的 ChartModel,并在 ViewModel 中初始化 LineSeries 数据,动态更新需调用 InvalidatePlot(true)。

C# Avalonia怎么实现一个简单的图表控件 Avalonia图表库

在 Avalonia 中实现简单图表,推荐使用 OxyPlot.Avalonia —— 它是 Avalonia 官方认可、轻量且易用的开源图表库,支持折线图、柱状图、散点图等常见类型,无需重写渲染逻辑。

安装 OxyPlot.Avalonia

在项目中通过 NuGet 添加依赖:

  • OxyPlot.Core(核心绘图引擎)
  • OxyPlot.Avalonia(Avalonia 平台适配器)

命令行示例:

dotnet add package OxyPlot.Core
dotnet add package OxyPlot.Avalonia

在 XAML 中声明图表控件

先在 app.axaml 或主窗口的 xmlns 中引入命名空间

xmlns:oxy=”https://github.com/oxyplot/oxyplot”

然后在界面中添加:

注意:ChartModel 是一个继承自 OxyPlot.PlotModel 的 ViewModel 属性,需在 DataContext 中提供。

创建基础折线图数据模型

在 ViewModel 中初始化一个简单的折线图:

public PlotModel ChartModel { get; } = new();

public MyViewModel()
{
  var series = new LineSeries { Title = “温度变化” };
  series.Points.Add(new DataPoint(0, 20));
  series.Points.Add(new DataPoint(1, 22));
  series.Points.Add(new DataPoint(2, 19));
  series.Points.Add(new DataPoint(3, 24));
  ChartModel.Series.Add(series);
  ChartModel.Title = “实时温度”;
}

运行后即可看到带坐标轴和图例的折线图。

进阶提示:响应式与更新

OxyPlot 默认不监听集合变更,如需动态刷新图表:

  • 调用 ChartModel.InvalidatePlot(true) 强制重绘
  • 若频繁更新,建议复用 LineSeries.Points.Clear() + Add(),避免重建 Series
  • 可绑定 PlotModel.background 或设置 PlotAreaBackground 调整视觉风格
text=ZqhQzanResources