Csharp Blazorise折线图仅绘制数据集的一部分

The Setup个

我有一个Microsoft Blazor Web应用程序(服务器端)，它使用Blazorise line chart组件来显示一个应该显示27个数据点的简单图形.(Blazorise Charts是对chart.js的Blazor包装).

开发环境:

• Microsoft Visual Studio 2022
• .NET 7

The Problem个

The graph only shows the first 10 data points. The remaining 17 are never shown, as you can see in the screenshot below: Hovering over the datapoints on the graph and checking the values displayed in the tooltips confirms that the 10 visible Y-values really do correspond to the first 10 items in the dataset, so it is plotting those correctly but is just ignoring the remaining 17 values.

我已经确认应用于Blazorise图组件的数据集确实包含27个值，还有27个标签，如上面的屏幕截图所示.

用户可以从大约20条原始数据记录中进行 Select .在每种情况下，都会为图表计算一个新的数据集，因此每个原始数据记录都会生成不同的图表.无论用户 Select 什么，都只显示前10个数据点.

Chrome的开发工具没有显示客户端错误.

What would resolve the problem?个

该图显示了所有27个数据点.

Code extracts个

下面是创建标签和数据集并启动图表的代码:

@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);
  }
}

以下是PolarService.GetPolar()的输出示例:

这是PolarPoint POCO班级:

namespace PolarExplorer;

public class PolarPoint
{
  public PolarPoint(double speed, double sink)
  {
    Speed = speed;
    Sink = sink;
  }
  
  public double Speed { get; set; }
  public double Sink { get; }
}

以下是为图表组件创建LineChartOptions的代码:

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);
  }
}

My _Host.cshtml在正文中包含以下脚本标记: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

What I have tried:个

• 不同的浏览器(Chrome和Edge)
• 将数据类型从double更改为decimal
• 更改数据点的数量
• 撕扯我的头发

所有这些都没有改变任何事情，前10个数据点是唯一显示过的数据点.

In Conclusion个

任何帮助，包括关于下一步在哪里寻找的建议，都将不胜感激！

谢谢.