You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用SciChartBlazor渲染瀑布图时多系列2D曲面渲染异常

使用SciChartBlazor实现瀑布图时的2D曲面渲染问题

我尝试使用SciChartBlazor封装库实现SciChart的瀑布图,遇到了2D曲面渲染问题。

在Blazor Web App客户端创建了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时,可正常生成简单图表,但设置为10添加多系列时,出现如下错误:

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(ResamplingParams实例)未正确创建,但不清楚原因。

补充说明:

  • 从Git下载的包,未使用NuGet
  • 存在JS等效示例
  • 需在App.razor中添加如下脚本:
<script async src="_content/SciChartBlazor/SciChart/sciChartBlazorJson.js"></script>

内容的提问来源于stack exchange,提问作者pythbull

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 16:56:10