Blazor 服务器端 Chartjs

Question

我正在使用 blazor 服务器端并尝试使用 Blazor.Chartjs 显示图表。我的问题是我有用户输入日期的表单，应用程序将从数据库中获取具有所选日期的数据。第一次显示图表但是当用户更改日期并且我想用新数据更改图表但是我有这个错误：

Unhandled exception rendering component: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
Microsoft.JSInterop.JSException: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '268yoqwqVBLFanukxnq3R4LjrnKrEAgIdVkQSPnIgfY'.
Microsoft.JSInterop.JSException: Could not find a chart with the given id. c4e7005b-e203-46f1-9719-68c6d14d848f
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Answer 1

我有同样的问题很长一段时间。我最终发现我需要清除数据集并将新数据添加回新数据集，然后更新图表。

我正在清除数据集：

_lineConfig.Data.Datasets.Clear();

然后我创建一个新版本，如下所示：

TempProductionLineTotal = SqlProdData.GetProductionTotals(searchDate[0], searchDate[1]);

_productionDataSet = new LineDataset<TimeTuple<int>>   
{
    BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Orange),
    BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Orange),
    Label = "Daily Total",
    Fill = false,
    BorderWidth = 2,
    PointRadius = 1,
    PointBorderWidth = 2,
    SteppedLine = SteppedLine.False,
    Hidden = false,
    LineTension = 0.0
};

_productionDataSet.AddRange(TempProductionLineTotal.Select(p =>
    new TimeTuple<int>(new Moment(p.DateNTime), Convert.ToInt32(p.Daily_Lineal))));

_lineConfig.Data.Datasets.Add(_productionDataSet);