如何让.js读取PHP语法，从MySQL获取甘特图数据？

当然可以实现动态从数据库获取数据生成甘特图，不过不是让.js文件直接解析PHP语法，而是通过PHP动态生成JS数据或者AJAX异步请求PHP接口获取数据这两种常见方式来实现，下面给你详细的步骤和代码示例：

方法一：将数据文件改为PHP动态生成JS #

这种方法是把原来的data.js改成PHP文件，让PHP先从数据库查询数据，再输出符合JS格式的变量，页面依然像引入JS一样引入这个PHP文件。

步骤1：创建data.php文件 #

<?php
// 1. 连接数据库（请替换成你的数据库信息）
$conn = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');
if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 2. 查询数据库数据（根据你的表结构调整SQL语句）
// 假设你的表名为tasks，包含字段：id, task_name, planned_start, planned_end, actual_start, actual_end, actual_color
$sql = "SELECT id, task_name, planned_start, planned_end, actual_start, actual_end, actual_color FROM tasks";
$result = mysqli_query($conn, $sql);

// 3. 构建甘特图所需的JS数据结构
$ganttData = [];
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $task = [
        'id' => $row['id'],
        'name' => $row['task_name'],
        'series' => [
            [
                'name' => 'Planned',
                'start' => "new Date(" . date('Y,n,j', strtotime($row['planned_start'])) . ")",
                'end' => "new Date(" . date('Y,n,j', strtotime($row['planned_end'])) . ")"
            ],
            [
                'name' => 'Actual',
                'start' => "new Date(" . date('Y,n,j', strtotime($row['actual_start'])) . ")",
                'end' => "new Date(" . date('Y,n,j', strtotime($row['actual_end'])) . ")",
                'color' => $row['actual_color'] ? "'" . $row['actual_color'] . "'" : "'#ff0000'"
            ]
        ]
    ];
    $ganttData[] = $task;
}

// 4. 输出JS格式的变量，处理Date对象的格式问题
header('Content-Type: application/javascript');
$jsonData = json_encode($ganttData);
// 替换JSON中的字符串格式Date为JS可识别的Date对象
$formattedData = str_replace('"new Date(', 'new Date(', str_replace(')"', ')', $jsonData));
echo "var ganttData = " . $formattedData . ";";

// 关闭数据库连接
mysqli_close($conn);
?>

步骤2：修改index.html的引入路径 #

把原来引入data.js的代码改成引入data.php：

<script type="text/javascript" src="data.php"></script>

这样页面加载时，PHP会动态生成JS数据，和原来的硬编码效果一致，但数据来自数据库。

方法二：使用AJAX异步获取数据 #

这种方法更灵活，页面先加载，再通过AJAX请求PHP接口获取JSON数据，然后初始化甘特图。

步骤1：创建PHP接口文件get_gantt_data.php #

<?php
// 连接数据库（同上）
$conn = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');
if (!$conn) {
    die(json_encode(['error' => '数据库连接失败']));
}

// 查询数据
$sql = "SELECT id, task_name, planned_start, planned_end, actual_start, actual_end, actual_color FROM tasks";
$result = mysqli_query($conn, $sql);

$ganttData = [];
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    // 把日期转成JS可识别的时间戳（毫秒）
    $task = [
        'id' => $row['id'],
        'name' => $row['task_name'],
        'series' => [
            [
                'name' => 'Planned',
                'start' => strtotime($row['planned_start']) * 1000,
                'end' => strtotime($row['planned_end']) * 1000
            ],
            [
                'name' => 'Actual',
                'start' => strtotime($row['actual_start']) * 1000,
                'end' => strtotime($row['actual_end']) * 1000,
                'color' => $row['actual_color'] ?: '#ff0000'
            ]
        ]
    ];
    $ganttData[] = $task;
}

// 输出JSON格式数据
header('Content-Type: application/json');
echo json_encode($ganttData);

mysqli_close($conn);
?>

步骤2：修改index.html的JS代码 #

去掉原来的data.js引入，改成AJAX请求数据后初始化甘特图：

<script type="text/javascript">
$(function () {
    // 用AJAX获取数据
    $.ajax({
        url: 'get_gantt_data.php',
        type: 'GET',
        dataType: 'json',
        success: function(ganttData) {
            // 把时间戳转成Date对象
            ganttData.forEach(function(task) {
                task.series.forEach(function(seriesItem) {
                    seriesItem.start = new Date(seriesItem.start);
                    seriesItem.end = new Date(seriesItem.end);
                });
            });
            
            // 初始化甘特图
            $("#ganttChart").ganttView({
                data: ganttData,
                slideWidth: 900,
                behavior: {
                    onClick: function (data) {
                        var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                        $("#eventMessage").text(msg);
                    },
                    onResize: function (data) {
                        var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                        $("#eventMessage").text(msg);
                    },
                    onDrag: function (data) {
                        var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                        $("#eventMessage").text(msg);
                    }
                }
            });
        },
        error: function() {
            alert('获取甘特图数据失败');
        }
    });
});
</script>

注意事项 #

• 请根据你的实际数据库表结构调整SQL语句和字段映射，确保字段名和你数据库里的一致。
• 建议使用mysqli或PDO操作数据库，避免使用已废弃的mysql_*函数（比如你提到的mysql_fetch_array，代码里做了兼容，但更推荐用新的扩展）。
• 数据库连接信息不要硬编码在代码里，最好放在单独的配置文件中，并且做好权限控制，避免泄露。

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