Blazorise折线图仅渲染数据集前10个数据点的问题求助
环境配置
我有一个Microsoft Blazor服务端Web应用,使用Blazorise折线图组件(Blazorise Charts是Chart.js的Blazor封装)显示应包含27个数据点的折线图。
开发环境:
- Microsoft Visual Studio 2022
- .NET 7
问题现象
折线图仅显示前10个数据点,剩余17个从未展示(截图:
)。悬浮查看tooltip确认可见Y值对应数据集前10项,已确认数据集和标签均含27个值。切换约20条原始数据记录时均存在此问题,Chrome开发者工具无客户端错误。
期望效果
折线图能显示全部27个数据点。
代码片段
图表绘制代码:
@using PolarExplorer.Data @using PolarExplorer.Interfaces @inject IPolarService PolarService @inject IOptionsBuilder OptionsBuilder <Card> <CardBody> <LineChart @ref="LineChart" TItem="double" Options="OptionsBuilder.Build()" /> </CardBody> </Card> @code { private LineChart<double> LineChart { get; set; } = new(); public async Task DrawChart(PolarData polarData) { var polar = PolarService.GetPolar(polarData); var labels = polar.Select(x => $"{x.Speed:00}").ToList(); var chartData = polar.Select(x => x.Sink).ToList(); var dataset = new LineChartDataset<double> { Label = "Polar", Data = chartData, BackgroundColor = Colour.Background.Red, BorderColor = Colour.Border.Red, PointRadius = 2, Tension = 0.4f }; await LineChart.Clear(); await LineChart.AddLabelsDatasetsAndUpdate(labels, dataset); StateHasChanged(); } }
PolarService代码:
using PolarExplorer.Data; using PolarExplorer.Interfaces; namespace PolarExplorer; public class PolarService : IPolarService { private const int NumberOfDataPoints = 27; private const int SpeedStep = 5; private const int MinSpeed = 120; public List<PolarPoint> GetPolar(PolarData polarData) { var point1 = new PolarPoint(polarData.Speed1, polarData.Sink1); var point2 = new PolarPoint(polarData.Speed2, polarData.Sink2); var point3 = new PolarPoint(polarData.Speed3, polarData.Sink3); var (a, b, c) = CalculateCoefficients(point1, point2, point3); var polar = Enumerable.Range(0, NumberOfDataPoints) .Select(x => x * SpeedStep + MinSpeed) .Select(speed => new PolarPoint(speed, a * speed * speed + b * speed + c)) .ToList(); return polar; } private static (double A, double B, double C) CalculateCoefficients(PolarPoint point1, PolarPoint point2, PolarPoint point3) { var denominator = (point1.Speed - point2.Speed) * (point1.Speed - point3.Speed) * (point2.Speed - point3.Speed); var a = (point3.Speed * (point2.Sink - point1.Sink) + point2.Speed * (point1.Sink - point3.Sink) + point1.Speed * (point3.Sink - point2.Sink)) / denominator; var b = (point3.Speed * point3.Speed * (point1.Sink - point2.Sink) + point2.Speed * point2.Speed * (point3.Sink - point1.Sink) + point1.Speed * point1.Speed * (point2.Sink - point3.Sink)) / denominator; var c = (point2.Speed * point3.Speed * (point2.Speed - point3.Speed) * point1.Sink + point3.Speed * point1.Speed * (point3.Speed - point1.Speed) * point2.Sink + point1.Speed * point2.Speed * (point1.Speed - point2.Speed) * point3.Sink) / denominator; return (a, b, c); } }
PolarPoint类:
namespace PolarExplorer; public class PolarPoint { public PolarPoint(double speed, double sink) { Speed = speed; Sink = sink; } public double Speed { get; set; } public double Sink { get; } }
图表配置代码:
using Blazorise.Charts; using PolarExplorer.Interfaces; namespace PolarExplorer; public class OptionsBuilder : IOptionsBuilder { public LineChartOptions Build() { return new LineChartOptions { AspectRatio = 3, Responsive = true, Plugins = new ChartPlugins { Title = new ChartTitle { Display = true, Text = "title goes here", Color = "#000000" } }, Scales = new ChartScales { X = new ChartAxis { Grid = new ChartAxisGridLine { BorderColor = "#000000", Display = true, DrawBorder = true, }, AlignToPixels = true, Title = new ChartScaleTitle { Align = "center", Text = "Cruising speed (kph)", Color = "#000000", Display = true }, Ticks = new ChartAxisTicks { Display = true, Major = new ChartAxisMajorTick { Enabled = true } } }, Y = new ChartAxis { Grid = new ChartAxisGridLine { BorderColor = 0, Display = true, DrawBorder = true }, Title = new ChartScaleTitle { Align = "center", Text = "Sink rate (m/s)", Color = 0, Display = true }, Ticks = new ChartAxisTicks { Display = true, }, BeginAtZero = true, } } }; } }
首页初始化代码:
@page "/" @using PolarExplorer.Interfaces @using PolarExplorer.Data @using PolarExplorer.Components @inject IPolarDataRepository PolarDataRepository <PageTitle>Index</PageTitle> <GliderSelector GroupedGliders="GroupedGliders" OnSelectedGliderChanged="@(async (gliderId) => await OnSelectedGliderChanged(gliderId))"></GliderSelector> <PolarDataInfoPanel PolarData="PolarData"></PolarDataInfoPanel> <ChartPanel @ref="ChartPanel"></ChartPanel> @code { private List<IGrouping<string, Glider>> GroupedGliders { get; set; } = new(); private PolarData PolarData { get; set; } = new(); private ChartPanel ChartPanel { get; set; } = new(); protected override async void OnInitialized() { await base.OnInitializedAsync(); GroupedGliders = PolarDataRepository .GetGliders() .OrderBy(glider => glider.ManufacturerName) .GroupBy(glider => glider.ManufacturerName) .ToList(); var firstGlider = GroupedGliders .First() .OrderBy(glider => glider.Model) .First(); PolarData = PolarDataRepository.GetPolarDataById(firstGlider.Id); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await ChartPanel.DrawChart(PolarData); } } private async Task OnSelectedGliderChanged(int gliderId) { PolarData = PolarDataRepository.GetPolarDataById(gliderId); await ChartPanel.DrawChart(PolarData); } }
_Host.cshtml中已引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
已尝试方案
- 更换浏览器(Chrome和Edge)
- 将数据类型从
double改为decimal - 修改数据点数量
- 排查常见问题
以上尝试均无效,仍仅显示前10个数据点。
恳请提供解决思路或方案,感谢!
内容的提问来源于stack exchange,提问作者straddevari
相关产品推荐
相关产品推荐

