英文:
Blazor Server UI PlotlyChart not updating after page change or refresh
问题
我目前正在处理一个预先开发好的Blazor服务器端项目。在主页上，我有一个PlotlyChart，向用户展示一些数据。
<PlotlyChart style="height: 60%; width: 100%;" @bind-Config="config" @bind-Layout="layout" @bind-Data="@DataContext.Data" @ref="@DataContext.Chart"/>
每当我硬编码数据时，图表运行得很完美，但当我从数据库提取数据时，图表会显示数据，但在刷新页面或重定向到另一页然后返回时，图表会变空白。
首先，我在我的代码中添加了StateHasChanged，并尝试了不同的生命周期方法，但未成功解决此问题。
我认为可能是我的数据数组为空，但实际上不是，因为我可以在控制台中输出它。
英文:
I'm working on a pre developed blazor server side project right now. In the home page I have a PlotlyChart which shows some data to the user
<PlotlyChart style="height: 60%; width: 100%;" @bind-Config="config" @bind-Layout="layout" @bind-Data="@DataContext.Data" @ref="@DataContext.Chart"/>
Whenever I hard code data, The chart works perfecly, But when I extract data from the database the chart shows the data but after refreshing the page or redirecting to another page and come back the chart shows empty.
First I add the StateHasChanged to my code and tried different lifecycles method but I wasnot successful to resolve the issue.
I thought maybe my data array is empty but it is not because I can write it in the console.
答案1
得分: -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);
}
希望这能帮助你解决问题。
英文:
I found the problem after spending a day on that.
I suppose to re-invoke the js library after the page is rendered.
Here is the complete code for that
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论