javascript - 如何在 JS 甘特图中实现 MYSQL 数据获取？

Question

我正在使用 AnyChart 的 JS Charts 库，我想用我的项目数据来实现它，我正在使用 Codeinghter 框架，我想知道最好的方法是什么。我知道这是非常基本的，但任何帮助表示赞赏。谢谢。
数据库
项目表
编号 ||姓名 ||开始日期 ||到期日期 ||
任务表
编号 ||姓名 ||开始日期 ||结束日期 ||里程碑_id ||项目编号
里程碑表
编号 ||姓名 ||开始日期 ||结束日期 ||项目编号
密码笔
https://codepen.io/its_sam/pen/rNpmJwy

anychart.onDocumentReady(function () {
    // create data
    var data = [{
        id: "1",
        name: "Milestone Development",
        actualStart: Date.UTC(2018, 01, 02),
        actualEnd: Date.UTC(2018, 06, 15),
        children: [{
                id: "1_1",
                name: "Task Planning",
                actualStart: Date.UTC(2018, 01, 02),
                actualEnd: Date.UTC(2018, 01, 22),
                connectTo: "1_2",
                connectorType: "finish-start",
                progressValue: "75%"
            },
            {
                id: "1_2",
                name: "Task Design and Prototyping",
                actualStart: Date.UTC(2018, 01, 23),
                actualEnd: Date.UTC(2018, 02, 20),
                connectTo: "1_3",
                connectorType: "start-start",
                progressValue: "60%"
            },
            {
                id: "1_3",
                name: "Task Evaluation Meeting",
                actualStart: Date.UTC(2018, 02, 23),
                actualEnd: Date.UTC(2018, 02, 23),
                connectTo: "1_4",
                connectorType: "start-start",
                progressValue: "80%"
            },
            {
                id: "1_4",
                name: "Application Development",
                actualStart: Date.UTC(2018, 02, 26),
                actualEnd: Date.UTC(2018, 04, 26),
                connectTo: "1_5",
                connectorType: "finish-finish",
                progressValue: "90%"
            },
            {
                id: "1_5",
                name: "Testing",
                actualStart: Date.UTC(2018, 04, 29),
                actualEnd: Date.UTC(2018, 05, 15),
                connectTo: "1_6",
                connectorType: "start-finish",
                progressValue: "60%"
            },
            {
                id: "1_6",
                name: "Deployment",
                actualStart: Date.UTC(2018, 05, 20),
                actualEnd: Date.UTC(2018, 05, 27),
                connectTo: "1_7",
                connectorType: "start-finish",
                progressValue: "100%"
            },
            {
                id: "1_7",
                name: "Maintenance",
                actualStart: Date.UTC(2018, 05, 30),
                actualEnd: Date.UTC(2018, 06, 11),
                progressValue: "40%"
            },

        ]
    }];
    // create a data tree
    var treeData = anychart.data.tree(data, "as-tree");

    // create a chart
    var chart = anychart.ganttProject();

    // set the data
    chart.data(treeData);
    // configure the scale
    chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
    // set the container id
    chart.container("container");
    // initiate drawing the chart
    chart.draw();
    // fit elements to the width of the timeline
    chart.fitAll();
});

<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<div id = "container" > </div>

Answer 1

如果您要求选择:

将模型数据直接渲染到 js 脚本中的 html 页面(页面只有在 php 应用程序从数据库中检索到数据后才会加载，因此如果数据集很大，显示任何内容可能会更慢)

关注 https://www.phptpoint.com/codeigniter-display-data-database/

在您的 VIEW (html) 中，您将拥有上面的代码，只需将 php 值打印到您的 JS 数据中

// your view
<script>
    anychart.onDocumentReady(function () {
       var data = <?= $data ?>

restful api 和 Ajax(使用空白图表区域更快的页面加载，直到 ajax 响应返回数据，您可以有一个占位符并在响应后替换)

将您的 Controller 映射到 Route.php 如下 https://www.guru99.com/codeigniter-url-routing.html ，并创建一个 GET 资源

在你的 Js 中，你真的不需要用 onready 包装它，因为它只会在你渲染你的页面后获取。

 // use something like axios, fetch...
 fetch('http://example.com/project/data')
      .then(response => (
           anychart.onDocumentReady(function () {
                 var data = response //.yourStructure
           ...continue the rest of your scripts....
      ))

如果您问如何使用 CI 模型 获取非规范化数据
使用查询生成器并做关节

    $builder = $db->table('project');
    $builder->select('*');
    $builder->join('tasks', 'tasks.project_id = project.id');
    $builder->join('milestone', 'milestone.project_id = project.id');
    $query = $builder->get();

注意:确保从 PHP 返回时您的数据已被 JSON_encoded，您可以在模型、 Controller 或 View 中执行此操作。由你决定