获取没有include（）的PHP变量 - Chart.js

问：

我正在构建一个客户门户，我正在制作一个基本的甘特图。除了SQL代码之外，我一切都在工作，以便在使用JSON解析数据之前获取数据。如果我硬编码：Chart.js

"...WHERE project_id = 1";

以上工作完全正常。但是，我想要：

"...WHERE project_id = " . $_GET['id'] . ";

我遇到的问题是，此代码与我的主文件（）位于单独的文件（）中，其中URL中有变量。data.phpupdate.php$_GET['id']

我希望 SQL 会根据正在更新的项目而变化，因为一个客户端可能同时拥有多个项目或多个客户端。

如果我将所有内容从 into 或 use 移入，将停止工作。我不想在 Javascript 中使用 PHP 并拥有内部 Javascript 文件，因为我知道这是不好的做法（例如）。data.phpupdate.phpinclude()Chart.jsvar jsVariable = <?php echo json_encode($data) ?>

这是我的代码。

Data.php

<?php
header('Content-Type: application/json');

include("../../path.php");
include(ROOT_PATH . "/app/database/config.php");

$var = $_GET['id'];

$sqlQuery = "SELECT project_tasks.id, project_tasks.status AS task_status, project_tasks.due_date, project_tasks.start_date AS starting_date, project_task_types.phase, project_task_types.task, project_task_types.position, projects.start_date, projects.finish_date FROM project_tasks 
             INNER JOIN project_task_types ON project_tasks.task_id = project_task_types.id 
             INNER JOIN projects ON project_tasks.project_id = projects.id 
             WHERE project_tasks.project_id = " . $var . "
             ORDER BY project_task_types.phase";

$result = mysqli_query($conn, $sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);

?>

对于脚本，我在网上找到了这个链接来帮助我： https://phppot.com/php/creating-dynamic-data-graph-using-php-and-chart-js/

chart.js

        $(document).ready(function () {
            showGraph();
        });

        function showGraph()
        {
            {
                $.post("https://www.caitlinoflynn.com/admin/projects/data.php",
                function (data)
                {
                    var id = [];
                    var task = [];
                    //project start date
                    var starting_date = [];
                    //task start date
                    var start_date = [];
                    var due_date = [];
                    var phase = [];
                    var task_status = [];
                    var position = [];
                    
                    for (var i in data) {
                        id.push(data[i].id);
                        task.push(data[i].task);
                        starting_date.push(data[i].starting_date);
                        start_date.push(data[i].start_date);
                        phase.push(data[i].phase);
                        due_date.push(data[i].due_date);
                        task_status.push(data[i].task_status);
                        position.push(data[i].position);
                    }
                    
                    const tasks = task;

                    //combine all arrays based on the task                 
                    const combineArrays = tasks.map((task, index) => {
                        let taskObject = {};
                        taskObject.id = id[index];
                        taskObject.position = position[index];
                        taskObject.task_status = task_status[index];
                        taskObject.x = [starting_date[index], due_date[index]];
                        taskObject.y = task;
                       return taskObject;
                    });
                    
                    //sort project tasks by position
                    combineArrays.sort(function(a, b) {
                        return a.position - b.position;
                    });

                    //Styling alterations                  
                    const backgroundColor = [];
                    const borderColor = [];
                    
                    for (i = 0; i < task_status.length; i++) {
                        if(task_status[i] == 0) {
                            backgroundColor.push($('.not-started').css("background-color"));
                        } else if(task_status[i] == 1) {
                            backgroundColor.push($('.in-progress').css("background-color"));
                        } else if(task_status[i] == 2) {
                            backgroundColor.push($('.completed').css("background-color"));
                        }
                    }
                    
                    for (i = 0; i < task_status.length; i++) {
                        if(task_status[i] == 0) {
                            borderColor.push($('.not-started').css("border-color"));
                        } else if(task_status[i] == 1) {
                            borderColor.push($('.in-progress').css("border-color"));
                        } else if(task_status[i] == 2) {
                            borderColor.push($('.completed').css("border-color"));
                        }
                    }

                    //Chart Data
                    var chartdata = {
                        datasets: [{
                            label: 'Tasks',
                            data: combineArrays,
                            backgroundColor: backgroundColor,
                            border: borderColor,
                            borderWidth: 1
                        }]
                    };
                    
                    const todayLine = {
                        id: 'todayLine',
                        afterDatasetsDraw(chart, args, pluginOptions) {
                            const {ctx, data, chartArea: {top, bottom, left, right}, scales: {x, y} } = chart;
                            
                            ctx.save();
                            
                            ctx.beginPath();
                            ctx.lineWidth = 3;
                            ctx.strokeStyle = $('.overdue').css("border-color");
                           // ctx.setLineDash = ([6, 6]);
                            ctx.moveTo(x.getPixelForValue(new Date()), top);
                            ctx.lineTo(x.getPixelForValue(new Date()), bottom);
                            ctx.stroke();
                        }
                    }
                    
                    

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata,
                        options: {
                            maintainAspectRatio: false,
                                indexAxis: 'y',
                                scales: {
                                    x: {
                                        position: 'top',
                                        min: '' + start_date.slice(0, 1) + '',
                                        type: 'time',
                                        time: {
                                            unit: 'day'
                                        }
                                    },
                                    y: {
                                    beginAtZero: true
                                    }
                                }
                            },
                        plugins: [todayLine]
                    });
                });
            }
        }

这是最后一个文件的一部分：

update.php

<div id="chart-container">
     <canvas id="graphCanvas"></canvas>
</div>

有没有另一种方法可以在不在脚本标签中使用 PHP 的情况下将代码重新排列到一个文件中？