gantt.js 甘特图js插件-BFW插件库

gantt.js 甘特图js插件
第一步引入bfwone，加载依赖项jquery bootstrap
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.fn.gantt", "bootstrap|gantt"], function() {
                $(".gantt").gantt({
                    source: [{
                        name: "Sprint 0",
                        desc: "Analysis",
                        values: [{
                            from: "/Date(1320192000000)/",
                            to: "/Date(1322401600000)/",
                            label: "Requirement Gathering",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: " ",
                        desc: "Scoping",
                        values: [{
                            from: "/Date(1322611200000)/",
                            to: "/Date(1323302400000)/",
                            label: "Scoping",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "Sprint 1",
                        desc: "Development",
                        values: [{
                            from: "/Date(1323802400000)/",
                            to: "/Date(1325685200000)/",
                            label: "Development",
                            customClass: "ganttGreen"
                        }]
                    }, {
                        name: " ",
                        desc: "Showcasing",
                        values: [{
                            from: "/Date(1325685200000)/",
                            to: "/Date(1325695200000)/",
                            label: "Showcasing",
                            customClass: "ganttBlue"
                        }]
                    }, {
                        name: "Sprint 2",
                        desc: "Development",
                        values: [{
                            from: "/Date(1326785200000)/",
                            to: "/Date(1325785200000)/",
                            label: "Development",
                            customClass: "ganttGreen"
                        }]
                    }, {
                        name: " ",
                        desc: "Showcasing",
                        values: [{
                            from: "/Date(1328785200000)/",
                            to: "/Date(1328905200000)/",
                            label: "Showcasing",
                            customClass: "ganttBlue"
                        }]
                    }, {
                        name: "Release Stage",
                        desc: "Training",
                        values: [{
                            from: "/Date(1330011200000)/",
                            to: "/Date(1336611200000)/",
                            label: "Training",
                            customClass: "ganttOrange"
                        }]
                    }, {
                        name: " ",
                        desc: "Deployment",
                        values: [{
                            from: "/Date(1336611200000)/",
                            to: "/Date(1338711200000)/",
                            label: "Deployment",
                            customClass: "ganttOrange"
                        }]
                    }, {
                        name: " ",
                        desc: "Warranty Period",
                        values: [{
                            from: "/Date(1336611200000)/",
                            to: "/Date(1349711200000)/",
                            label: "Warranty Period",
                            customClass: "ganttOrange"
                        }]
                    }],
                    navigate: "scroll",
                    maxScale: "hours",
                    itemsPerPage: 10,
                    onItemClick: function(data) {
                        alert("Item clicked - show some details");
                    },
                    onAddClick: function(dt, rowId) {
                        alert("Empty space clicked - add an item!");
                    },
                    onRender: function() {
                        if (window.console && typeof console.log === "function") {
                            console.log("chart rendered");
                        }
                    }
                });

                $(".gantt").popover({
                    selector: ".bar",
                    title: "I'm a popover",
                    content: "And I'm the content of said popover.",
                    trigger: "hover"
                });
            });
        });
    </script>
</head>
<body>
    <div class="gantt"></div>
</body>
</html>
gantt.js 甘特图js插件

网友评论0

ace.js

xheditor.js

jsmind.js

sketchpad.js

prism.js

highlight.js

tinymce.js

gantt.js

tui-image-editor.js

drawingboard.js
