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: screenshot of the line graph 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()的输出示例:

Data reom 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

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

谢谢.

推荐答案

这一限制来自于最近许可条款的变化.对于社区和未注册版本,现在实施了限制.这可以在https://blazorise.com/pricing上进行比较,并在发行说明https://blazorise.com/news/release-notes/140中进行了解释

Csharp相关问答推荐

需要深入了解NpgSQL DateTimeOffset处理

如何使用ConcurentDictionary属性上的属性将自定义System.Text.Json JsonConverter应用于该属性的值?

为什么我的ASP.NET核心MVC应用程序要为HTML元素添加一些标识符?

不仅仅是一个简单的自定义按钮

如何注销Microsoft帐户?

Quartz调度程序不调用作业(job)类

在C#中,有没有一种方法可以集中定义跨多个方法使用的XML参数描述符?

实体框架核心中的ComplexType和OwnsOne有什么不同?

取决于您的数据量的多个嵌套循环

在IAsyncEnumerable上先调用,然后跳过(1)可以吗?

升级后发出SWITCH语句

CRL已过期,但ChainStatus告诉我RevocationStatus未知

为什么ReadOnlySpan;T&>没有Slice(...)的重载接受Range实例的?

在集成测试中可以在模拟InMemory数据库中设定数据种子

{ or ; expected error如何解决此问题

为什么我的自定义Json.net转换器不工作?

使用免费的DotNet库从Azure函数向Azure文件共享上的现有Excel文件追加行

如何处理ASP.NET Core中包含两个构造函数的控制器?

如何在C#中反序列化Java持续时间?

从route获取URL参数,无需指定@page route - Blazor