ASP.NET Core 3.1下Syncfusion图表不符合预期的问题解决

需求说明 #

• 现有SQL表格，包含动态增长的用户数据（当前5个，未来会持续增加）
• 需要创建Syncfusion折线图，参考指定示例图表样式，但图例需显示为各个User（替换示例中的Total、Cancelled等标识）
• Total列非必需

现有问题代码 #

<ejs-chart id="container4" selectionMode="DragXY" enableAnimation="true">
    <e-chart-tooltipsettings enable="true" format="${point.x} : <b>${point.y} </b>">
    </e-chart-tooltipsettings>
    <e-chart-legendsettings visible="true" enableHighlight="true">
    </e-chart-legendsettings>
    <e-chart-zoomsettings enableMouseWheelZooming="true" enableScrollbar="false" enablePinchZooming="true" enableSelectionZooming="true" showToolbar="true"></e-chart-zoomsettings>
    <e-chart-primaryxaxis valueType="Category" labelFormat="{value}"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@IndexModel.chart4Data" xName="User" width="2" yName="May" name="May" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
             <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Circle" isFilled="true"></e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

解决方案 #

核心问题分析 #

当前代码仅渲染了单条月份折线，但需求是每个用户对应一条折线，X轴应为月份、Y轴为数值，图例显示用户名称。需调整数据结构和图表配置逻辑。

步骤1：调整数据源结构 #

将原表格的用户列转置为系列，最终数据源格式示例：

// 定义数据模型
public class UserMonthData
{
    public string Month { get; set; }
    public int User1 { get; set; }
    public int User2 { get; set; }
    // 后续新增用户可动态添加对应字段
}

// 控制器中构建适配数据
var chartData = new List<UserMonthData>
{
    new UserMonthData { Month = "May", User1 = 12, User2 = 18 },
    new UserMonthData { Month = "June", User1 = 15, User2 = 22 }
};

步骤2：动态生成图表系列 #

因为用户数量动态增长，需在视图中循环生成每个用户的折线系列：

<ejs-chart id="container4" selectionMode="DragXY" enableAnimation="true">
    <e-chart-tooltipsettings enable="true" format="${point.x} : <b>${point.y}</b>"></e-chart-tooltipsettings>
    <e-chart-legendsettings visible="true" enableHighlight="true"></e-chart-legendsettings>
    <e-chart-zoomsettings enableMouseWheelZooming="true" enableScrollbar="false" enablePinchZooming="true" enableSelectionZooming="true" showToolbar="true"></e-chart-zoomsettings>
    
    <!-- X轴设置为月份 -->
    <e-chart-primaryxaxis valueType="Category" labelFormat="{value}" title="Month"></e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Value"></e-chart-primaryyaxis>
    
    <e-series-collection>
        <!-- 循环生成每个用户的折线系列 -->
        @foreach (var userColumn in GetUserColumns(Model.chart4Data))
        {
            <e-series dataSource="@Model.chart4Data" 
                      xName="Month" 
                      yName="@userColumn" 
                      name="@userColumn" 
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Circle" isFilled="true"></e-series-marker>
            </e-series>
        }
    </e-series-collection>
</ejs-chart>

步骤3：添加动态获取用户列的辅助方法 #

在视图中添加方法，提取动态的用户字段名：

@functions {
    public List<string> GetUserColumns(List<UserMonthData> data)
    {
        if (data == null || data.Count == 0) return new List<string>();
        // 过滤掉Month字段，剩余字段即为用户列
        return typeof(UserMonthData).GetProperties()
                                .Where(p => p.Name != "Month")
                                .Select(p => p.Name)
                                .ToList();
    }
}

关键配置说明 #

• X轴改为月份，对应数据的Month字段，匹配示例图表的X轴逻辑
• 每个用户对应一条折线系列，图例自动显示用户名称（即系列的name属性）
• 通过循环生成系列，自动适配用户数量动态增长的需求

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