Avalonia ScottPlot跨平台图表测试

Avalonia ScottPlot

Avalonia是.Net跨平台的UI库,支持Windows,Linux,iOS,MacOS,Android等;
ScottPlot为跨平台的UI控件库,支持Avalonia,Windows,Eto,等平台;本文测试内容为Avalonia在Windows,Linux,Android,WebAssembly平台实时动态曲线测试;
本文代码

步骤

  1. 安装Avalonia For VS2022扩展
  2. 新建名为AvaScottPlot的Avalonia Cross Platform项目
  3. 将AvaScottPlot主工程及各个平台的启动工程改为.Net8
  4. AvaScottPlot工程增加如下引用
     <PackageReference Include="ScottPlot.Avalonia" Version="5.0.20" />
  1. 写代码
  2. 启动AvaScottPlot.Desktop等工程调试
  3. Linux端选择AvaScottPlot.Desktop发布为linux-x64选择单文件

关键代码

<!--MainView.axaml-->
<sc:AvaPlot x:Name="plot" />
// MainView.axaml.cs
 private void InitLines()
 {
     if (plot == null) return;
     // PlotFont = Fonts.Detect("实时数据");
     plot.Plot.Axes.Title.Label.Text = "RealTime Data:实时数据";
     plot.Plot.Axes.Title.Label.FontName = PlotFont;
     plot.Plot.Clear();
     Lines = new LineModel[LineCount];
     DateTime start = DateTime.Now;
     for (int i = 0; i < LineCount; i++)
     {
         Lines[i] = new LineModel();
         Lines[i].Init(i + 1, plot.Plot, start);
     }
     plot.Plot.Benchmark.IsVisible = true;
 }

 public void UpdateData(DateTime ts, double[] data)
 {
     int Min = Math.Min(data.Length, Lines.Length);
     if (Min <= 0) return;
     for (int i = 0; i < Min; i++)
     {
         UpdateData(i, ts, data[i]);
     }
     Render();
 }
 private void UpdateData(int i, DateTime ts, double latestValue)
 {
     var tmp = Lines[i];
     tmp.UpdateData(ts, latestValue);
 }
 public void Render()
 {
     plot.Plot.Axes.AutoScale();
     plot.Refresh();
 }
 private void TimerElapsed(object? sender, EventArgs e)
 {
     double[] data = new double[LineCount];
     for (int i = 0; i < LineCount; i++)
     {
         data[i] = Generate.RandomData.RandomNumber(100);
     }
     UpdateData(DateTime.Now, data);
 }

效果

本人电脑配置i5-1035G1,浏览器:Chrome 120.0.6099.225,虚拟机:VMware Workstation 16.2.3 Player;曲线数量20条;

  1. Avalonia On Windows 32FPS
    在这里插入图片描述

  2. Avalonia On WebAssembly FPS为1,最小化浏览器时不渲染
    在这里插入图片描述

  3. Avalonia On Linux 在虚拟机中运行FPS为1
    在这里插入图片描述

  4. Avalonia On Android
    在这里插入图片描述

已知问题

  1. WebAssembly工程中文显示异常,暂时无法解决
### 如何在 Avalonia 中使用 ScottPlot 为曲线拐点添加标签 要在 Avalonia 应用程序中使用 ScottPlot 并为其绘制的曲线拐点添加标签,可以按照以下方法实现。以下是详细的说明以及示例代码。 #### 背景介绍 Avalonia 是一个跨平台的 UI 工具包,支持 .NET 开发者构建现代化的应用程序[^1]。ScottPlot 则是一个功能强大的绘图库,能够轻松创建各种类型的图表并集成到应用程序中。通过结合两者,开发者可以在 Avalonia 的界面中嵌入动态交互式的图形。 为了给曲线的拐点添加标签,通常需要完成以下几个部分的工作: 1. **初始化 ScottPlot 图表控件** 使用 `ScottPlot.Wpf.Plot` 或其 Avalonia 版本来设置绘图区域。 2. **计算曲线数据及其拐点位置** 需要分析输入的数据集以找到拐点的位置。这可以通过数值微分或其他算法实现。 3. **在指定位置添加文本标注** 使用 ScottPlot 提供的方法,在特定坐标上显示自定义文字标签。 下面展示了一个完整的 C# 实现案例,演示如何利用这些概念向 Avalonia 窗口中加入带标记的折线图。 ```csharp using System; using Avalonia; using Avalonia.Controls; using Avalonia.Markup.Xaml; using ScottPlot; public class MainWindow : Window { public MainWindow() { InitializeComponent(); #if DEBUG this.AttachDevTools(); #endif var plt = new Plot(600, 400); // 创建一个新的 ScottPlot 绘图对象 double[] xs = { 0, 1, 2, 3, 4 }; // X 坐标数组 double[] ys = { 0, 1, 0, 1, 0 }; // Y 坐标数组 int inflectionPointIndex = FindInflectionPoint(xs, ys); if (inflectionPointIndex != -1) { double xAtInflection = xs[inflectionPointIndex]; double yAtInflection = ys[inflectionPointIndex]; plt.AddScatter(xs, ys); // 添加散点图表示原始数据点 plt.AddText("C", xAtInflection, yAtInflection).FontSize = 12; // 在拐点处放置字母"C" Console.WriteLine($"Inflection point detected at ({xAtInflection}, {yAtInflection})"); } else { Console.WriteLine("No valid inflection points found."); } ((Window)this).Content = new ScottPlot.Avalonia.WpfFormsHost().AddControl(new WpfPlot() { plt = plt }); } private void InitializeComponent() { AvaloniaXamlLoader.Load(this); } /// <summary> /// 寻找简单的一维数组中的潜在拐点索引. /// </summary> static int FindInflectionPoint(double[] xs, double[] ys) { for(int i=1;i<ys.Length-1;i++) { if((ys[i]-ys[i-1])*(ys[i+1]-ys[i])<=0){ return i; } } return -1; } } ``` 上述代码片段展示了如何在一个简单的 Avalonia 程序里加载 ScottPlot 控制器,并且针对一组已知数据寻找可能存在的单一拐点再加以标注的过程。 #### 注意事项 当实际应用更复杂的真实世界场景时,可能还需要考虑更多因素比如噪声过滤、多维度检测等高级处理逻辑才能准确识别所有类型的转折情况。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文光山石

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值