使用数据库JSON数据动态填充Google Gantt甘特图无法显示问题求解

已确认错误点 #

• 语法错误：原始代码和修改后的代码都存在$.getJSON回调函数缺少闭合右括号)的问题，修改后的版本还额外新增了冗余的AJAX请求，逻辑完全冲突
• 日期格式不兼容：ASP.NET MVC默认返回的JSON日期为/Date(时间戳)/格式，无法直接被Google甘特图识别为JS Date对象，需要手动转换
• 隐性风险：直接用TaskName作为Task ID，若存在重名任务会触发唯一键冲突，导致渲染失败

修正步骤 #

1. 后端代码调整（可选，也可仅在前端处理日期转换） #

提前将日期转为标准格式字符串，降低前端处理成本：

public ActionResult GetChartData()
{
    var schedulingData = db.Schedules.Select(x => new{ 
        x.StartDate,
        x.EndDate,
        x.TaskName
    }).ToList().Select(x => new {
        x.TaskName,
        StartDate = x.StartDate.ToString("yyyy-MM-dd"),
        EndDate = x.EndDate.ToString("yyyy-MM-dd")
    });
    return Json(schedulingData,JsonRequestBehavior.AllowGet);
}

2. 前端代码修正（完整版） #

修复语法问题，统一请求逻辑，添加日期转换处理：

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // 请确保页面已提前引入jQuery库，否则$相关方法会执行报错
    google.charts.load('current', { 'packages': ['gantt'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('string', 'Resource');
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('number', 'Duration');
        data.addColumn('number', 'Percent Complete');
        data.addColumn('string', 'Dependencies');   

        $.getJSON("@Url.Action("GetChartData")", function (chartData) {
            $.each(chartData, function (i, item) {
                // 转换为Google甘特图可识别的日期对象
                let start = new Date(item.StartDate);
                let end = new Date(item.EndDate);
                // 用索引作为Task ID，避免重名冲突
                data.addRow([i.toString(), item.TaskName, "test", start, end, null, 100, null]);
            });
            // 数据加载完成后再渲染图表，必须放在回调内部
            var options = {
                height: 400,
                gantt: {
                    trackHeight: 30
                }
            };
            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
            chart.draw(data, options);
        });
    }
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

3. 若不修改后端代码，可使用以下方法转换ASP.NET默认日期格式 #

// 前端解析ASP.NET默认日期格式的方法
function parseNetDate(dateStr) {
    return new Date(parseInt(dateStr.replace("/Date(", "").replace(")/",""), 10));
}
// 调用示例
let start = parseNetDate(item.StartDate);

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