如何用for循环数组为折线图动态添加series并处理AJAX返回数据

我来帮你搞定这个折线图的数据处理问题！看起来你需要按国家分组展示每月的FTE数据，下面是完整的实现思路和代码，我用最常用的ECharts来举例，核心逻辑也适配其他主流图表库：

$.ajax({
    type: "GET",
    url: "/api/ReportAPI/GetMonthlyEmployeeFte",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (Result) {
        // 1. 先按国家分组数据（每个国家对应一条折线）
        const countryGroups = {};
        // 收集所有不重复的年月，用于生成x轴类目
        const allMonths = new Set();

        Result.forEach(item => {
            const country = item.COUNTRY_NAME;
            // 把年月格式化为"YYYY-MM"的规范形式，方便排序和展示
            const yearMonth = `${item.YEAR}-${String(item.MONTH).padStart(2, '0')}`;
            
            // 初始化当前国家的分组数组
            if (!countryGroups[country]) {
                countryGroups[country] = [];
            }
            // 存入当前项的年月和FTE数值
            countryGroups[country].push({
                yearMonth: yearMonth,
                fte: item.MONTHLY_TOTAL_FTE
            });
            
            // 将年月加入集合自动去重
            allMonths.add(yearMonth);
        });

        // 2. 把年月集合转成按时间排序的数组（保证x轴顺序正确）
        const sortedMonths = Array.from(allMonths).sort((a, b) => new Date(a) - new Date(b));

        // 3. 生成折线图需要的series数据
        const series = Object.keys(countryGroups).map(country => {
            // 按x轴年月顺序匹配对应FTE值，无数据时用0填充（可改为null让折线断开）
            const data = sortedMonths.map(month => {
                const match = countryGroups[country].find(item => item.yearMonth === month);
                return match ? match.fte : 0;
            });

            return {
                name: country,
                type: 'line',
                data: data
            };
        });

        // 4. 初始化折线图（假设页面有id为fteChart的DOM容器）
        const chartDom = document.getElementById('fteChart');
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '各国月度FTE趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: Object.keys(countryGroups) // 图例显示所有国家名称
            },
            xAxis: {
                type: 'category',
                data: sortedMonths,
                axisLabel: {
                    rotate: 45 // 旋转标签避免重叠
                }
            },
            yAxis: {
                type: 'value',
                name: 'FTE数值'
            },
            series: series
        };
        myChart.setOption(option);
    },
    error: function (err) {
        console.error('获取FTE数据失败:', err);
    }
});

关键逻辑说明： #

• 分组处理：用countryGroups对象把同一国家的数据归类，确保每条折线对应一个国家的完整数据。
• 年月格式化：将零散的MONTH和YEAR拼接成标准日期格式，既解决排序问题，也让x轴展示更直观。
• 数据补全：如果某国在特定月份没有数据，用0填充（你可以根据需求改成null让折线在无数据处断开）。
• 顺序保证：对年月数组按时间排序，避免x轴出现乱序的情况。

要是你用的是Highcharts等其他图表库，核心的分组和数据整理逻辑完全通用，只需要调整最后的图表初始化代码即可。

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