带有 .NET Blazor 包装器的 SciChart 瀑布图

Question

我正在尝试使用此包装器添加 SciChart 的这个漂亮的瀑布图： https://github.com/NRTDP/SciChartBlazor 但渲染 2d 曲面似乎存在问题。

我使用新的 Blazor Web 应用程序在客户端创建了一个 Chart.razor，代码如下：

@page "/chart"
@using SciChartBlazor
@using SciChartBlazor.Axes
@using SciChartBlazor.DataSeries
@using SciChartBlazor.Modifiers
@using SciChartBlazor.RenderableSeries
@using SciChartBlazor.Services
@rendermode InteractiveAuto
@inject IJSRuntime JsRuntime 

<div id="@Id" @ref="_chart" style="height:600px" />
<button @onclick=Load>Load</button>
@code
{
    private string Id { get; set; } = "C" + Guid.NewGuid().ToString();

    private protected ElementReference _chart;

    SciChartBuilder _chartBuilder = default!;

    int _seriesCount = 10;

    private async void Load()
    {

        for (int i = 0; i < _seriesCount; i++)
        {
            var XAxis = new NumericAxis()
                {
                    Id = $"X{i}",
                    MaxAutoTicks = 5,
                    DrawMajorGridLines = false,
                    GrowBy = new SciChartNumberRange(0, 0.2),
                    VisibleRange = new SciChartNumberRange(-1000.0, 1000.0),
                    VisibleRangeLimit = new SciChartNumberRange(-1000.0, 1000.0),
                    IsVisible = (i == 0),
                    //OverrideOffset = 0
                };

            await _chartBuilder.AddAxis(XAxis, AxisType.X);
            var YAxis = new NumericAxis()
                {
                    Id = $"Y{i}",
                    MaxAutoTicks = 5,
                    DrawMajorGridLines = false,
                    VisibleRange = new SciChartNumberRange(-100.0, 100.0),
                    VisibleRangeLimit = new SciChartNumberRange(-1000.0, 1000.0),
                    IsVisible = (i == 0),
                    //OverrideOffset = 0
                };

            await _chartBuilder.AddAxis(YAxis, AxisType.Y);

            double[] x = new double[10];
            double[] y = new double[10];


            for (int j = 0; j < 10; j++)
            {
                x[j] = (double)j;
                y[j] = Math.Sin(j) * 100 + i;
            }

            var ser = new XyDataSeries<double, double>(x, y) { DataSeriesName = $"N{i}" };

            var fastLineRenderableSeries = new SciChartBlazor.RenderableSeries.FastLineRenderableSeries<double, double>(ser)
                { Id = $"S{i}", XAxisId = $"X{i}", YAxisId = $"Y{i}", StrokeThickness = 1, Stroke = "#64BAE4" };

            await _chartBuilder.AddSeries(fastLineRenderableSeries);
        }

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //Create the chart
            _chartBuilder = new SciChartBuilder(_chart, JsRuntime, new SciChartBlazorService(JsRuntime, new SciChartOptions()));
            await _chartBuilder.CreateChart();
        }
    }
} 

当 _seriesCount 等于 1 时，它会构建一个简单的图表，但添加更多系列会在一行中返回错误：

 this.nativeArgs.StartIndex = rp.indexesRange.min

完整踪迹：

Error from chart in div Ced51579e-26cc-4536-96e2-49f46254f9db: TypeError: Cannot read properties of undefined (reading 'min')
    at ExtremeResamplerHelper.resetAndFillBasicNativeArgs (ExtremeResamplerHelper.js:178:54)
    at ExtremeResamplerHelper.needsResampling (ExtremeResamplerHelper.js:50:18)
    at BaseRenderableSeries.needsResampling (BaseRenderableSeries.js:935:37)
    at SciChartRenderer.resampleSeries (SciChartRenderer.js:65:17)
    at SciChartRenderer.prepareSeriesRenderData (SciChartRenderer.js:328:57)
    at SciChartRenderer.render (SciChartRenderer.js:144:35)
    at SciChartSurface.doDrawingLoop (SciChartSurface.js:707:35)
    at SciChartSurface.onRenderSurfaceDraw (SciChartSurface.js:1337:18)
    at RenderSurface.onRenderTimeElapsed (RenderSurface.js:37:14)
    at Object.Draw (createMaster.js:294:60)

遵循 SciChartRenderer.resampleSeries 的堆栈跟踪 (SciChartRenderer.js:65:17)

 var rp = new ResamplingParams_1.ResamplingParams(seriesViewRect, rs, xAxis);

哪里

var ResamplingParams_1 = __webpack_require__(/*! ../Numerics/Resamplers/ResamplingParams */ "./node_modules/scichart/Charting/Numerics/Resamplers/ResamplingParams.js");

看起来 rp 没有正确创建，但我不明白为什么？

Ps 我已经从 git 下载了包，但没有使用 NuGet。您也可以在这里找到与此等效的jshttps://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/FeaturedApps/ScientificCharts/InteractiveWaterfallChart/index.tsx

您还需要在 App.razor 中添加此行：

<script async src="_content/SciChartBlazor/SciChart/sciChartBlazorJson.js"></script>

Answer 1

在与 NRTDP/SciChartBlazor 斗争之后，我尝试了SciChart/JS 与 blazor - 它工作正常，而且很简单。

我的建议是不要依赖（在本例中）上次更新于 2 年前（截至目前）的 NuGet。

我尝试为 SciChartBlazor 做出贡献，在看到它的内部结构之后 - 它不涵盖 SciChart API，无论如何你都需要/最终添加 JS 来支持你所需要的。

所以，这是一个人可以如何...

使用 blazor-server-app 获取 SciChart/JS。

• 截至撰写之日可与 .Net6+8 配合使用。

Pages_Layout.cshtml

<head>
...
    
    <!-- Reference the latest version is not recommended for production! -->
    @* <script src="https://cdn.jsdelivr.net/npm/scichart/index.min.js" crossorigin="anonymous"></script> *@
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>

    <script src="~/MySciChartGraphsApi.js"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

Pages\MyPage.razor

<div class="GTGraph" id="scichart-root" style="visibility: @graphVisibility"></div>

wwwroot\MySciChartGraphsApi.js

function helloSciChart() {
    return "SciChart-world";
}


// Create a SciChartSurface in the div 'scichart-root'
async function initSciChart() {
    // based on: 
    // * https://www.scichart.com/getting-started/scichart-javascript/
    // ** https://codepen.io/scichart/pen/eYPXazY

    const {
        SciChartSurface,
        NumericAxis,
        FastLineRenderableSeries,
        XyDataSeries,
        EllipsePointMarker,
        SweepAnimation,
        SciChartJsNavyTheme,
        NumberRange,
        MouseWheelZoomModifier,
        ZoomPanModifier,
        ZoomExtentsModifier
    } = SciChart;

    // Tell SciChart where to get webassembly files from.
    SciChartSurface.useWasmFromCDN();

    // Initialize SciChartSurface. Don't forget to await!
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
        theme: new SciChartJsNavyTheme(),
        title: "SciChart.js First Chart",
        titleStyle: { fontSize: 22 }
    });

    // Create an XAxis and YAxis with growBy padding
    const growBy = new NumberRange(0.1, 0.1);
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis", growBy }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisTitle: "Y Axis", growBy }));

    // Create a line series with some initial data
    sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
        stroke: "steelblue",
        strokeThickness: 3,
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: [0,1,2,3,4,5,6,7,8,9],
            yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
        }),
        pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
        animation: new SweepAnimation({ duration: 300, fadeEffect: true })
    }));
  
    // Add some interaction modifiers to show zooming and panning
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier(), new ZoomExtentsModifier());

    return "done";
};

CSS 文件

.MyGraph { height: 400px; }

您的页面.razor / HTML

<div id="scichart-root" class="MyGraph"></div>

您的页面.razor.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            // string result2 = await JSRuntime.InvokeAsync<string>("helloSciChart");  // checking JS works
            string result3 = await JSRuntime.InvokeAsync<string>("initSciChart");

        }
        catch (Exception exception)
        {
            Logger.LogError("exception: {exception}", exception);
        }
    }

    await base.OnAfterRenderAsync(firstRender);
}

预期结果。

使用 SciChart/JS 的奖励

• 您可以复制粘贴 SciChart 示例，它们会立即生效。
• 不依赖其他
• 如果 SciChart 发布新的 API 功能，您可以立即在您的应用程序中使用它们。

HTH.