Plotly.Blazor 3D曲面图数据源更新时无法刷新的问题

问题场景 #

开发Blazor Server应用时，使用Plotly.Blazor展示测试数据的3D曲面图，初始加载默认数据渲染正常，但通过下拉框切换数据集后，图表变为空白2D状态且标题未更新。经调试新数据正确，但@bind-Data未触发更新，仅调用chart.Clear()时有反应，尝试chart.React()无效，仅页面刷新可恢复，且2D散点图无此问题。

问题根源 #

1. Blazor对普通List的集合变更（Clear/Add）无法自动检测，导致PlotlyChart组件未收到数据更新通知
2. 调用cht_dBVvsFvsA.Clear()会清除图表的3D场景配置，导致切换后回到默认2D状态
3. 单向绑定Data="data"无法触发组件自动刷新，需使用双向绑定@bind-Data

解决方案 #

1. 改用ObservableCollection或每次创建新Data集合 #

让Blazor检测到数据引用变化，触发组件更新。推荐使用ObservableCollection<ITrace>，其集合变更会自动触发Blazor的变更通知。

2. 移除Clear()调用 #

避免破坏3D场景配置，直接更新数据和布局即可。

3. 使用双向绑定@bind-Data #

确保数据变更时图表能同步刷新。

4. 手动触发状态更新（可选） #

若仍存在更新不及时问题，调用StateHasChanged()通知Blazor重新渲染组件。

修改后的完整代码 #

@using Plotly.Blazor
@using Plotly.Blazor.Traces
@using Plotly.Blazor.LayoutLib
@using Plotly.Blazor.Traces.ScatterLib
@using System.Collections.ObjectModel
@inject ResultsService resultsService

<PlotlyChart style="height: 100vh; min-height: 600px" 
             @bind-Layout="layout3D_dBV" 
             @bind-Config="config" 
             @bind-Data="data" 
             @ref="cht_dBVvsFvsA" />

@code {
    List<decimal> x = new List<decimal> {}; // 在OnInitializedAsync中填充数据
    List<decimal> y = new List<decimal> {}; // 在OnInitializedAsync中填充数据
    Layout layout3D_dBV = new Layout();
    Config config = new Config();
    List<decimal[]> z;
    // 改用ObservableCollection触发集合变更通知
    ObservableCollection<ITrace> data = new ObservableCollection<ITrace>();
    string selectedZ = "mV";

    private PlotlyChart cht_dBVvsFvsA;

    private async Task Replot() // 下拉框切换数据集时触发此方法
    {
        ConfigureLayout();
        // 清空现有数据，ObservableCollection会自动通知组件更新
        data.Clear();
        
        Get3DplotData();
        
        // 可选：若组件仍未刷新，手动触发状态变更
        // StateHasChanged();
    }

    private void ConfigureLayout()
    {        
        layout3D_dBV = new Layout
        {
            Title = new Title
            {
                Text = $"{selectedZ} vs Amplitude vs Frequency"
            },
            Scene = new[]
            {
                new Scene()
                {
                    XAxis = new Plotly.Blazor.LayoutLib.SceneLib.XAxis(){Title = new Plotly.Blazor.LayoutLib.SceneLib.XAxisLib.Title(){Text = "Frequency (Hz)"}},
                    YAxis = new Plotly.Blazor.LayoutLib.SceneLib.YAxis(){Title = new Plotly.Blazor.LayoutLib.SceneLib.YAxisLib.Title(){Text = "Amplitude in (mV)"}},
                    ZAxis = new Plotly.Blazor.LayoutLib.SceneLib.ZAxis(){Title = new Plotly.Blazor.LayoutLib.SceneLib.ZAxisLib.Title(){Text = $"Amplidue out ({selectedZ})"}}
                }
            },
            Margin = new Margin
            {
                L = 65,
                R = 50,
                B = 65,
                T = 90
            }
        };

        config = new Config
        {
            Responsive = true
        };
    }

    private void Get3DplotData()    
    {    
        z = new List<decimal[]>();        

        for(int i = 0; i < y.Count; i++)
        {
            var currentValues = resultsService.GetResults(y[i]);
            z.Add(currentValues.ToArray());
        }
        
        data.Add(new Surface()
        {                        
            X = x.Cast<object>().ToList(),
            Y = y.Cast<object>().ToList(),
            Z = z.Cast<object>().ToList()                        
        });
    }
}

内容的提问来源于stack exchange，提问作者grove188