ScottPlot5 Blazor WebAssembly测试

ScottPlot5 Blazor WebAssembly测试

ScottPlot5 是.Net的一个图表控件库;支持WPF,WindowsForm,Avalonia, Eto, WinUI, Blazor(仅WebAssembly),本次测试只有BlazorWebAssembly,其他的官网有;
ScottPlot5 Github地址;本文章源码
本人还测试了ScottPlot5在Avalonia环境下在安卓,Windows,Linux各个平台上正常运行且无中文显示问题; ScottPlot5测试文章

步骤

1. 使用.Net8创建名为BlazorApp1的Web工程并选择混合渲染模式
2. Client工程引用如下三个包

<PackageReference Include="ScottPlot.Blazor" Version="5.0.18" />
<PackageReference Include="SkiaSharp" Version="2.88.7" />
<PackageReference Include="SkiaSharp.Views.Blazor" Version="2.88.7" />

3. 写代码
4. 启动BlazorApp1工程

关键代码

1. Blazor界面

@page "/scottplot5"
@rendermode InteractiveWebAssembly
@using ScottPlot
@using ScottPlot.Blazor
<h5>
    ScottPlot5 Test:
    <InputNumber @bind-Value="LineCount"></InputNumber>
    <button class="btn btn-primary" @onclick="StartPlot">Start</button>
</h5>
<BlazorPlot Style="width:100%;height:80%;" @ref="plot"></BlazorPlot>

2. 界面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;
    }

3. 效果
   本人电脑配置i5-1035G1,浏览器:Chrome 120.0.6099.225
   20条曲线的情况下刚开始有20FPS,后面只有8FPS,性能较低
   

已知问题

1. 中文显示异常,暂时无法解决