使用AJAX获取C#控制器数据，jqplot折线图无法绘制求助

你遇到的问题主要出在数据整理方式和jqPlot配置上，我帮你梳理下核心问题并给出修正方案：

核心问题点 #

• 你在循环中每次创建一个新的$.jqplot实例，并且只传入单个数据点，这样不仅会覆盖之前的图表，单个点也无法形成折线图。jqPlot需要接收完整的数据集（多个点组成的数组）来绘制折线。
• X轴错误使用了$.jqplot.ajaxDataRenderer，这个渲染器是用来直接从远程URL加载数据的，而你已经通过AJAX拿到了数据，应该使用DateAxisRenderer来处理日期类型的X轴。
• tickInterval设置为'15 second'和你的日期格式（MMM DD，即月日）不匹配，应该设置为对应的日期间隔（比如'1 day'）。

修正后的代码 #

第一步：确保引入必要的jqPlot插件 #

除了jqPlot核心库，你还需要引入日期轴渲染器插件（如果没引入的话）：

<script src="path-to-jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

第二步：修改JavaScript代码 #

function getGraph(fcn) { 
    var turl = '/Rep/ChartBoxPlot/' + fcn; 
    $.ajax({ 
        type: "POST", 
        url: turl, 
        dataType: "json", 
        success: function (result) { 
            $('#chart1').empty(); 
            // 初始化两个数组，分别存储Actual和Forecast的所有数据点
            var line1 = [];
            var line2 = [];
            
            // 循环遍历数据，填充数组
            for (var i = 0; i < result.length; i++) { 
                var temp = result[i]['Date']; 
                // 转换为jqPlot能识别的Date对象（或者保持格式化后的字符串，建议用Date对象更准确）
                var date = moment(temp).toDate(); // 转换为原生Date对象
                // 或者如果用格式化后的字符串：var date = moment(temp).format('MMM DD');
                
                // 将点添加到对应数组中
                line1.push([date, result[i]['Actual']]); 
                line2.push([date, result[i]['Forecast']]); 
            } 
            
            // 一次性创建图表，传入完整的数据集
            var plot = $.jqplot('chart1', [line1, line2], { 
                axes: { 
                    xaxis: { 
                        label: "Date", // 修正标签为日期
                        renderer: $.jqplot.DateAxisRenderer, // 使用日期轴渲染器
                        tickOptions: { 
                            formatString: '%b %d' // 对应MMM DD的格式，%b是缩写月份，%d是日期
                        },
                        tickInterval: '1 day' // 根据你的数据间隔调整，比如每天一个刻度
                    }, 
                    yaxis: { label: 'Lines' }, 
                },
                // 可选：添加图例区分两条线
                legend: {
                    show: true,
                    labels: ['Actual', 'Forecast']
                }
            }); 
        }, 
        error(result) { 
            console.error('AJAX请求失败:', result); // 用console.log更方便调试，代替alert
        } 
    }); 
}

额外提示 #

• 确保moment.js已经正确引入，否则日期转换会失败。
• 如果图表还是不显示，可以打开浏览器控制台（F12）查看是否有报错，比如插件未加载、数据格式错误等。
• 测试时可以先打印line1和line2的内容，确认数据格式是[[日期1, 值1], [日期2, 值2], ...]这种二维数组。

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