如何在Blazor .NET 6/8页面中使用SciChart/JS？

我之前折腾过NRTDP/SciChartBlazor，后来转而尝试直接将SciChart/JS与Blazor结合，结果发现这套方案运行顺畅、操作简便。

本来我想给SciChartBlazor项目做贡献，但研究它的内部机制后发现，这个库并没有完整覆盖SciChart的API，最终还是得自己编写JS代码才能满足需求。所以干脆直接用SciChart/JS来集成，下面是具体可操作的步骤：

1. 安装SciChart/JS依赖 #

进入项目的wwwroot目录，通过npm安装SciChart/JS：

cd wwwroot
npm install scichart

如果不想用npm，也可以直接下载SciChart的Wasm和脚本文件，放到wwwroot/js目录下。

2. 配置许可证（付费版必填） #

如果使用SciChart的付费版本，需要在wwwroot/index.html的<head>标签中添加许可证密钥：

<script>
    SciChartSurface.setRuntimeLicenseKey("你的SciChart许可证密钥");
</script>

3. 封装Blazor组件 #

新建一个Razor组件（比如SciChartChart.razor），用来承载SciChart图表：

<div id="@ChartId" style="width: 100%; height: 600px;"></div>

@code {
    [Parameter] public string ChartId { get; set; } = "scichart-default";

    [Inject] private IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS初始化图表
            await JSRuntime.InvokeVoidAsync("initSciChart", ChartId);
        }
    }
}

4. 编写JS初始化逻辑 #

在wwwroot/js目录下创建scichart-utils.js，编写图表初始化的代码：

async function initSciChart(containerId) {
    // 从CDN加载Wasm文件（也可以使用本地文件）
    const { SciChartSurface, NumericAxis, FastLineRenderableSeries, XyDataSeries } = await SciChart.SciChartSurface.useWasmFromCDN();

    // 创建图表实例
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(containerId);

    // 添加X、Y坐标轴
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    // 准备示例数据并添加到图表
    const dataSeries = new XyDataSeries(wasmContext);
    for (let i = 0; i < 100; i++) {
        dataSeries.append(i, Math.sin(i * 0.1));
    }
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, { dataSeries }));
}

然后在wwwroot/index.html中引入这个脚本：

<script src="js/scichart-utils.js"></script>

5. 在页面中使用图表组件 #

在需要展示图表的页面（比如Index.razor）中，直接引入封装好的组件：

<h3>SciChart Blazor Server Demo</h3>
<SciChartChart ChartId="demo-chart" />

内容的提问来源于stack exchange，提问作者ShloEmi