使用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
相关产品推荐
相关产品推荐

