Blazor WebAssembly中Syncfusion图表报错：<text>属性x期望长度却为NaN

云上老周

2026-8-11

Blazor WebAssembly中Syncfusion图表报错：<text> attribute x: Expected length, "NaN"

问题现象

在Blazor WebAssembly项目中使用Syncfusion图表搭建仪表盘时，出现错误：<text> attribute x: Expected length, "NaN"，Chrome和Edge浏览器均出现此问题，图表无法正常渲染。

代码展示

Statistics.razor组件代码

<CascadingAuthenticationState>
    <AuthorizeView>
        <NotAuthorized>
            <body>
            <header class="bgimg-1" id="home">
                <div class="w3-display-left w3-text-white" style="padding-left: 5%">
                    <div class="container" style="background: none">
                        <span class="w3-jumbo w3-hide-small">Log in to see the content</span><br>
                        <span class="w3-xxlarge w3-hide-large w3-hide-medium">Log in to see the content</span><br>
                    </div>
                </div>
            </header>
            </body>
        </NotAuthorized>
        <Authorized>
            @if (_statisticsToDisplay.Count == 0)
            {
                <div class="spinner"></div>
            }
            else
            {
                <div class="container2">
                    <div class="row">
                        <div class="col-sm" style="margin-left: 10%; margin-top: 5%; align-content: center;">
                            <div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
                                <table class='table' style=" color: black">
                                    <thead>
                                    <tr>
                                        <th class="url" style="width: 35%">Worker</th>
                                        <th class="isActive" style="width: 15%">Is Active</th>
                                        <th class="status" style="width: 15%">Status</th>
                                        <th class="duration" style="width: 15%">Duration (minutes)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach (var workerStatistic in _statisticsToDisplay)
                                    {
                                        <tr>
                                            <td>@workerStatistic.URL</td>
                                            <td>@workerStatistic.isActive</td>
                                            <td>@workerStatistic.status</td>
                                            <td>@workerStatistic.duration</td>
                                        </tr>
                                    }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-sm" style="margin-right: 10%; margin-top: 5%; align-content: center;">
                            <div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
                                <SfChart Title="Analysis Of Failed Runs" Width="100%">
                                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
                                                       LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
                                                       LabelIntersectAction="LabelIntersectAction.Rotate90"
                                                       EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
                                        <ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
                                        <ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
                                        <ChartMultiLevelLabels>
                                            <ChartMultiLevelLabel>
                                                <ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
                                                <ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
                                                </ChartAxisMultiLevelLabelBorder>
                                                <ChartCategories>
                                                    <ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
                                                </ChartCategories>
                                            </ChartMultiLevelLabel>
                                        </ChartMultiLevelLabels>
                                    </ChartPrimaryXAxis>
                                    <ChartPrimaryYAxis Title="Number Of Failed Runs" Minimum="0" Maximum="100" Interval="10">
                                        <ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
                                        <ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
                                    </ChartPrimaryYAxis>
                                    <ChartSeriesCollection>
                                        <ChartSeries DataSource="@_statisticsToDisplay" XName="URL" YName="numberOfFailedRuns" Type="ChartSeriesType.Column">
                                        </ChartSeries>
                                    </ChartSeriesCollection>
                                </SfChart>
                            </div>
                            <div class="containerStat" style="width: 100%; align-content: center; margin-left: 10%">
                                <SfChart Title="Analysis Of The Duration Time Of The Workers" Width="100%">
                                    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Workers"
                                                       LabelPlacement="LabelPlacement.OnTicks" EdgeLabelPlacement="EdgeLabelPlacement.Shift"
                                                       LabelIntersectAction="LabelIntersectAction.Rotate90"
                                                       EnableTrim="true" MaximumLabelWidth="50" LabelPosition="AxisPosition.Outside">
                                        <ChartAxisLabelStyle Color="red" FontWeight="bold"></ChartAxisLabelStyle>
                                        <ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
                                        <ChartMultiLevelLabels>
                                            <ChartMultiLevelLabel>
                                                <ChartAxisMultiLevelLabelTextStyle FontWeight="bold"></ChartAxisMultiLevelLabelTextStyle>
                                                <ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2>
                                                </ChartAxisMultiLevelLabelBorder>
                                                <ChartCategories>
                                                    <ChartCategory Start="-0.5" End="21.5" Text="Worker Name"></ChartCategory>
                                                </ChartCategories>
                                            </ChartMultiLevelLabel>
                                        </ChartMultiLevelLabels>
                                    </ChartPrimaryXAxis>
                                    <ChartPrimaryYAxis Title="Average Duration (in minutes)" Minimum="0" Maximum="200" Interval="20">
                                        <ChartAxisLabelStyle Color="blue" FontWeight="bold"></ChartAxisLabelStyle>
                                        <ChartAxisTitleStyle Color="#ed7d31" FontWeight="bold"></ChartAxisTitleStyle>
                                    </ChartPrimaryYAxis>
                                    <ChartSeriesCollection>
                                        <ChartSeries DataSource="@_statisticsToDisplay" XName="URL" YName="duration" Type="ChartSeriesType.Line">
                                        </ChartSeries>
                                    </ChartSeriesCollection>
                                </SfChart>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </Authorized>
    </AuthorizeView>
</CascadingAuthenticationState>

代码逻辑部分

@code{
    public class ModelTest
    {
        public int ID { get; set; }
        public string URL { get; set; }
        public double duration { get; set; }
        public bool isActive { get; set; }
        public int numberOfFailedRuns { get; set; }
        public string status { get; set; }
    }

    private List<Models.WorkerConfiguration> WorkerConfigList = new();
    private List<Models.WorkerStatistic> WorkerStatisticsList = new();
    
    private List<ModelTest> _statisticsToDisplay = new();
    protected override async Task OnInitializedAsync()
    {
        WorkerStatisticsList = await WorkerStatistics.ReadAllWorkerStatistics();
        WorkerConfigList = await WorkerConfigService.ReadAllWorkerConfigurations();
        _statisticsToDisplay = ReadWorkerStatistics();
    }

    List<ModelTest> ReadWorkerStatistics()
    {
        List<ModelTest> statistics = new List<ModelTest>();
        
        foreach (var workerStatistic in WorkerStatisticsList)
        {
            Models.WorkerConfiguration workerConfiguration = WorkerConfigService.GetWorkerConfigurationById(workerStatistic.FkWorkerConfigurationId);
            int countNumberOfFailedRuns = 0;
            DateTime? start = workerStatistic.StartTime;
            DateTime? end = workerStatistic.EndTime;
            TimeSpan? calculateDuration = end - start;
            
            if (workerStatistic.Status == "Failed")
            {
                countNumberOfFailedRuns++;
            }
            statistics.Add(new ModelTest(){URL = workerConfiguration.Url, duration = calculateDuration.Value.TotalMinutes , isActive = workerConfiguration.IsActive, numberOfFailedRuns = countNumberOfFailedRuns, status = workerStatistic.Status});
        }
        return statistics;
    }
}

错误原因

MultiLevelLabels的End值硬编码不匹配数据量：你在<ChartCategory>中硬编码了End="21.5"，这个值对应Category轴的最后一个数据项的索引+0.5（Category轴索引从0开始，21.5对应22条数据）。当你的_statisticsToDisplay数据条数不等于22时，Syncfusion计算多级标签的位置会出现NaN，导致报错。
Duration计算未处理null情况：如果workerStatistic.StartTime或EndTime为null，calculateDuration会是null，直接调用Value.TotalMinutes会抛出空引用异常，间接影响图表渲染。
WorkerConfiguration可能为null：WorkerConfigService.GetWorkerConfigurationById如果找不到对应配置，会返回null，此时workerConfiguration.Url会是null，导致图表X轴标签异常。

解决方案

1. 动态计算MultiLevelLabels的Start和End

将硬编码的End值改为动态绑定，基于当前数据量计算：

<ChartCategories>
    <ChartCategory Start="-0.5" End="@(_statisticsToDisplay.Count - 0.5)" Text="Worker Name"></ChartCategory>
</ChartCategories>

两个图表的MultiLevelLabels都需要修改这个配置。

2. 处理Duration的null情况

在计算duration时，添加null判断，避免空引用：

duration = end.HasValue && start.HasValue ? (end.Value - start.Value).TotalMinutes : 0;

3. 处理WorkerConfiguration为null的情况

添加判断，避免访问null对象的属性：

string url = workerConfiguration?.Url ?? "Unknown Worker";
bool isActive = workerConfiguration?.IsActive ?? false;

修改后的ReadWorkerStatistics方法

List<ModelTest> ReadWorkerStatistics()
{
    List<ModelTest> statistics = new List<ModelTest>();
    
    foreach (var workerStatistic in WorkerStatisticsList)
    {
        Models.WorkerConfiguration workerConfiguration = WorkerConfigService.GetWorkerConfigurationById(workerStatistic.FkWorkerConfigurationId);
        int countNumberOfFailedRuns = workerStatistic.Status == "Failed" ? 1 : 0;
        DateTime? start = workerStatistic.StartTime;
        DateTime? end = workerStatistic.EndTime;
        double duration = end.HasValue && start.HasValue ? (end.Value - start.Value).TotalMinutes : 0;
        string url = workerConfiguration?.Url ?? "Unknown Worker";
        bool isActive = workerConfiguration?.IsActive ?? false;
        
        statistics.Add(new ModelTest()
        {
            URL = url,
            duration = duration,
            isActive = isActive,
            numberOfFailedRuns = countNumberOfFailedRuns,
            status = workerStatistic.Status ?? "Unknown"
        });
    }
    return statistics;
}

验证

修改后重新运行项目，图表应该能正常渲染，NaN错误会消失。

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

Blazor WebAssembly中Syncfusion图表报错：<text>属性x期望长度却为NaN

问题现象 #

代码展示 #

Statistics.razor组件代码 #

代码逻辑部分 #

错误原因 #

解决方案 #

1. 动态计算MultiLevelLabels的Start和End #

2. 处理Duration的null情况 #

3. 处理WorkerConfiguration为null的情况 #

修改后的ReadWorkerStatistics方法 #

验证 #