如何将JSON数据传入Highcharts折线图函数？（AJAX取数场景）

我来帮你搞定这个问题，其实核心就是在AJAX的success回调里处理好从后端拿到的数据，然后把它喂给Highcharts的配置项就行。下面分两种常见情况给你具体代码示例：

情况1：直接在AJAX成功后初始化图表 #

如果你的页面还没创建Highcharts实例，那可以直接在获取到数据后初始化图表，步骤如下：

1. 先确保页面上有一个用来放图表的容器div：

<div id="employeeFteChart" style="width: 100%; height: 400px;"></div>

2. 完善你的AJAX代码，在success回调里处理数据并初始化图表：

$.ajax({
    type: "GET",
    url: "/api/ReportAPI/GetMonthlyEmployeeFte",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (Result) {
        // 这里假设后端返回的Result是一个对象数组，每个元素包含month（月份）和fte（数值）字段
        // 提取x轴的categories（月份）
        const categories = Result.map(item => item.month);
        // 提取折线图的数值数据
        const fteData = Result.map(item => item.fte);

        // 初始化Highcharts折线图
        Highcharts.chart('employeeFteChart', {
            title: {
                text: '月度员工FTE统计'
            },
            xAxis: {
                categories: categories // 把动态获取的月份数组传进来
            },
            yAxis: {
                title: {
                    text: 'FTE数值'
                }
            },
            series: [{
                name: '员工FTE',
                data: fteData // 把动态获取的数值数组传进来
            }]
        });
    },
    error: function (error) {
        console.error('获取月度FTE数据失败:', error);
    }
});

情况2：图表已提前初始化，需要更新数据 #

如果页面加载时已经创建了空的图表实例，之后只需要更新数据，那可以用Highcharts的update方法：

// 先初始化一个空的图表
let fteChart = Highcharts.chart('employeeFteChart', {
    title: {
        text: '月度员工FTE统计'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'FTE数值'
        }
    },
    series: [{
        name: '员工FTE',
        data: []
    }]
});

// 然后通过AJAX获取数据并更新图表
$.ajax({
    type: "GET",
    url: "/api/ReportAPI/GetMonthlyEmployeeFte",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (Result) {
        const categories = Result.map(item => item.month);
        const fteData = Result.map(item => item.fte);

        // 更新图表的x轴分类和系列数据
        fteChart.update({
            xAxis: {
                categories: categories
            },
            series: [{
                data: fteData
            }]
        });
    },
    error: function (error) {
        console.error('更新FTE数据失败:', error);
    }
});

注意事项 #

• 要根据后端实际返回的JSON结构调整数据提取逻辑：比如如果后端直接返回{ "categories": ["Jan", "Feb", ...], "data": [120, 130, ...] }，那直接用Result.categories和Result.data就行，不用map转换。
• 确保Highcharts的库已经正确引入到页面中，不然会报错。

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