Blazorise Pie chart component无示例实现方法求助

下面是可直接复用的最小实现流程，覆盖从组件引用到数据加载的全步骤：

• 前置依赖确认
  确保项目已经完成Blazorise Chart扩展的安装和服务注册，这是组件正常运行的前提，缺少注册会直接导致组件渲染空白。
• 页面引入命名空间
  在需要添加饼图的razor文件顶部，引入图表组件的命名空间：
  @using Blazorise.Charts
• 组件占位与实例定义
  在页面需要展示饼图的位置放置组件，绑定ref用于后续调用组件方法加载数据，注意不要在组件完成首次渲染前操作实例：

<PieChart @ref="pieChartInstance" TItem="double" Class="w-75 h-75" />

@code {
    private PieChart<double> pieChartInstance;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅在首次渲染完成后加载数据，避免空引用异常
        if (firstRender)
        {
            await RenderPieChart();
        }
    }
}

• 数据构造与图表渲染
  构造饼图对应的数据集、标签、配置项，调用组件方法完成渲染，示例代码：

private async Task RenderPieChart()
{
    // 1. 构造饼图数据集
    var chartDataset = new PieChartDataset<double>
    {
        Label = "样本数据占比",
        // 每个扇区的原始数值，组件会自动计算占比
        Data = new List<double> { 42, 28, 18, 12 },
        // 每个扇区对应的填充色，长度必须和Data列表一致
        BackgroundColor = new List<string> { "#36A2EB", "#FF6384", "#FFCE56", "#4BC0C0" },
        BorderColor = "#fff",
        BorderWidth = 2
    };

    // 2. 配置图表交互、样式参数
    var chartOptions = new PieChartOptions
    {
        Responsive = true,
        MaintainAspectRatio = true,
        Plugins = new ChartPlugins
        {
            Legend = new ChartLegend
            {
                Display = true,
                Position = "bottom"
            }
        }
    };

    // 3. 清空旧数据、加载新数据并刷新图表
    await pieChartInstance.Clear();
    await pieChartInstance.AddLabels(new List<string> { "选项1", "选项2", "选项3", "选项4" });
    await pieChartInstance.AddDataset(chartDataset);
    await pieChartInstance.Update(chartOptions);
}

• 常见踩坑提示
  • 禁止在OnInitialized/OnInitializedAsync生命周期内操作图表实例，此时组件还未完成渲染，ref实例为null会直接抛错
  • 组件的泛型参数TItem支持常用数值类型（int/double/decimal等），和你传入Data的数值类型保持一致即可
  • 动态更新数据时，每次更新前都要调用Clear()方法清空旧数据集，避免新旧数据叠加
  • 如果需要展示自定义悬浮提示、绑定扇区点击事件，可以在PieChartOptions里配置对应回调方法即可

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