JS甘特图如何实现MYSQL数据抓取？

Question

我正在使用 AnyChart 的 JS 图表库，我想用我的项目数据实现它，我正在使用 Codeinghter 框架，我想知道什么是最好的方法。我知道这是非常基本的，但我们将不胜感激。谢谢

数据库

项目Table

编号 ||名称 || start_date || due_date ||

任务Table

编号 ||名称 || start_date || end_date || milestone_id || project_id

里程碑Table

编号 ||名称 ||开始日期 ||结束日期 || project_id

Codepen 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 响应返回数据，您可以有一个占位符并在响应）

按照 https://www.guru99.com/codeigniter-url-routing.html 将您的控制器映射到 Route.php，并创建 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，您可以在模型、控制器或视图中执行此操作。由你决定

JS甘特图如何实现MYSQL数据抓取？

How to implement MYSQL data fetching in JS Gantt chart?

javascript

php

mysql

gantt-chart

anychart