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

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.29 10:29:53