Blazor Server UI PlotlyChart在页面更改或刷新后未更新

Question

我现在正在开发一个预置的blazor服务器端项目。在首页我有一个PlotlyChart显示一些数据给用户

<PlotlyChart style="height: 60%; width: 100%;" @bind-Config="config" @bind-Layout="layout" @bind-Data="@DataContext.Data" @ref="@DataContext.Chart"/>

每当我硬编码数据时，图表工作得很好，但是当我从数据库中提取数据时，图表显示数据，但在刷新页面或重定向到另一个页面并返回后，图表显示为空。

首先，我将StateHasChanged添加到我的代码中，并尝试了不同的生命周期方法，但我没有成功解决问题。

我想也许我的数据数组是空的，但它不是，因为我可以在控制台中写它。

Answer 1

我花了一天时间才发现问题。

我想在页面呈现后重新调用js库。

下面是

的完整代码

Config config = new Config()
{
DisplayModeBar = Plotly.Blazor.ConfigLib.DisplayModeBarEnum.False,
Responsive = true
};
Layout layout = new Layout()
{
Margin = new Plotly.Blazor.LayoutLib.Margin
{
B = 15,
T = 5,
L = 85,
R = 2
},
YAxis = new System.Collections.Generic.List<YAxis>
{
new YAxis
{
Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
{
Text = "kWh",
Font = new Plotly.Blazor.LayoutLib.YAxisLib.TitleLib.Font
{
Family = "Font Awesome 5 Free",
Size = 12
}
}
}
}
};
protected override void OnAfterRender(bool firstRender)
{
var scatter = new Scatter
{
Name = "ScatterTrace",
// Here we'll use dates on the X axis. More info here: https://plotly.com/javascript/time-series/
X = DataContext.XData,
Y = DataContext.YData,
HoverInfo = Plotly.Blazor.Traces.ScatterLib.HoverInfoFlag.Y,
Line = new Plotly.Blazor.Traces.ScatterLib.Line
{
Color = "rgb(3, 181, 133)" // switch over to variable
}
};
InvokeAsync(async () =>
{
try
{
await DataContext.Chart.AddTrace(scatter);
}
catch (Exception e)
{
Console.WriteLine(e.Message, "Caught exception while adding new plot trace");
}
}).IgnoreAwait();
base.OnAfterRender(firstRender);
}