如何在JS甘特图中实现MYSQL数据提取？

Question

我正在使用AnyChart的JS图表库，我想用我的项目数据来实现它，我使用的是Codein族法框架，我想知道什么是最好的方法。我知道这是非常基本的，但任何帮助都是值得感谢的。谢谢。

数据库

项目表

id _x_

任务表

id _x_

里程碑表

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页面(只有在set)

• follow https://www.phptpoint.com/codeigniter-display-data-database/

应用程序从数据库中检索数据之后，

1. 才会加载页面，因此，如果您有大数据
2. ，则显示任何数据的速度可能会慢一些)。

• 在您的视图(html)中，您将得到上面的代码，并将php值输出到您的JS数据中。

//视图anychart.onDocumentReady(函数() { var data = )

Ajax response)

• Map restful和ajax (在ajax响应返回数据之前，使用更快的页面加载空白图表区域，您可以拥有一个占位符并在response)
  • Map
  • Controller之后替换为Route.php，如下所示，并创建一个GET资源

• 在您的Js中，您实际上不需要将其包装为onready，因为它只在呈现页面之后才会获取。

//使用类似于axios的东西，取..。获取(‘http://example.com/project/data') .then(response => (anychart.onDocumentReady(函数() ){ var data = response /..yourStructure ...continue )其余的脚本.)

如果您想知道如何使用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，您可以在模型、控制器或视图中这样做。你说了算