npm 包 sheepd-frappe-gantt 使用教程

sheepd-frappe-gantt 是一个基于 Frappe Gantt 的 JavaScript 库，它可以帮助前端开发人员在网页中创建 Gantt 图表。这个库提供了很多功能，包括时间轴、任务名称、起止时间、进度条以及依赖关系（前置任务、后续任务）等。通过使用 sheepd-frappe-gantt，可以快速地实现 Gantt 图表，并将其集成到自己的项目中。

安装

要使用 sheepd-frappe-gantt，需要先安装它。可以在终端中使用以下命令进行安装：

--- ------- -------------------

安装成功后，就可以在项目中使用 sheepd-frappe-gantt 了。

使用

在项目中使用 sheepd-frappe-gantt，首先需要在 HTML 文件中添加一个容器，用于放置 Gantt 图表。

---- ---------------------------

然后在 JavaScript 文件中创建 Gantt 实例，并将其绘制到容器中。

------ - ----- - ---- ---------------------

----- ----- - --- ------------------------- ------ -
    -------------- ---
    ------------- ---
    ----- ---
    ----------- --------- ----- ----- ----- ------ ------- ---------
    ----------- ---
    ------------------ --
    ------------ --
    -------- ---
    ---------- -------
    ------------ -------------
    ------------------ -----
    --------- -------- ------ -
        ------------------
    --
    --------------- -------- ------ ------ ---- -
        ----------------- ------ -----
    --
    ------------------- -------- ------ --------- -
        ----------------- ----------
    --
---

--------------------------------

在代码中，第一个参数 #gantt-container 指定了容器的 ID，第二个参数 tasks 是一个包含任务列表的 JSON 对象，第三个参数是可选的配置项。在配置项中，可以设置 Gantt 图表的样式、日期格式、弹出框内容以及点击、日期和进度变更的回调函数。通过回调函数，可以在相应的事件被触发时执行自定义的行为。

示例

下面是一个简单的示例，它演示了 sheepd-frappe-gantt 的基本用法。在这个示例中，我们创建了一个包含三个任务的 JSON 对象，并将其绘制为 Gantt 图表。

--------- -----
----- ----------
------
    ----- ----------------
    -------------------------- ------------
    ----- ---------------- -------------------------------------------------------------------------------------
-------
------
    ---- ---------------------------
    ------- --------------------------------------------------------------------------------------------
    --------
        ----- ----- - -
            -
                --- --------
                ----- ------
                ------ -------------
                ---- -------------
                --------- --
            --
            -
                --- --------
                ----- ------
                ------ -------------
                ---- -------------
                --------- ---
                ------------- -------
            --
            -
                --- --------
                ----- ------
                ------ -------------
                ---- -------------
                --------- --
                ------------- -------
            -
        --
        
        ----- ----- - --- ------------------------------- ------ -
            -------------- ---
            ------------- ---
            ----- ---
            ----------- --------- ----- ----- ----- ------ ------- ---------
            ----------- ---
            ------------------ --
            ------------ --
            -------- ---
            ---------- -------
            ------------ -------------
            ------------------ -----
            --------- -------- ------ -
                ------------------
            --
            --------------- -------- ------ ------ ---- -
                ----------------- ------ -----
            --
            ------------------- -------- ------ --------- -
                ----------------- ----------
            --
        ---

        --------------------------------
    ---------
-------
-------

结论

在本文中，我们介绍了如何使用 sheepd-frappe-gantt 库在网页中创建 Gantt 图表。我们讨论了如何安装库、添加容器、在代码中创建 Gantt 实例、设置任务列表和配置项，并设置回调函数以响应用户的操作。我们还演示了一个简单的示例，展示了她的基本用法。通过学习 sheepd-frappe-gantt 库，您可以快速实现 Gantt 图表，并将其集成到自己的前端项目中，成为更好的前端开发人员。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005730b81e8991b448e93a1

阅读全文

猜你喜欢

  • npm 包 moleculer-json-schema-validator 使用教程

    引言 在前端开发过程中，我们经常需要对数据进行验证。数据验证的结果直接关系到整个应用的稳定性和用户体验。而 JSON Schema 标准却并不好用，于是我们需要一个好用的工具来简化我们的数据验证流程。

    3 年前
  • npm包 wjtools-wepy 使用教程

    npm包 wjtools-wepy 使用教程 wjtools-wepy是一款用于微信小程序开发的npm包，该包提供了很多实用的工具函数，能够快速帮助开发者实现各种功能。

    3 年前
  • npm 包 async-qps-throttle 使用教程

    在前端开发中，我们经常会遇到需要控制函数的执行频率的场景，特别是在和服务端打交道的时候。为了解决这个问题，我们可以使用 async-qps-throttle 这个 npm 包来实现函数的限制频率。

    3 年前
  • npm 包 passport-mitopenid 使用教程

    在进行 Web 开发的过程中，很多场景都需要用户登录和认证。而对于 MIT 网络中的用户，MIT 开发了一种 MIT OpenID 的认证方式。为了方便开发者在 Node.js 环境下使用 MIT O...

    3 年前
  • npm 包 feathers-nedb-ajv 使用教程

    简介 本文将介绍如何使用 npm 包 feathers-nedb-ajv，在前端开发中实现对数据的增删改查操作。Feathers-nedb-ajv 是一款针对数据持久化存储的 npm 包，它是基于 F...

    3 年前
  • npm 包 logagent-input-kafka 使用教程

    简介 在现代的前端开发中，我们经常需要处理日志数据以了解应用的运行情况。Kafka 是一个广泛用于分布式系统中进行大规模数据处理的较为流行的平台，可以用于各种场景下的数据处理，其中日志处理便是其中之一...

    3 年前
  • npm 包 @icebob/cpu 使用教程

    简介 在前端开发中，我们经常需要了解当前浏览器的 CPU 使用情况，以及对不同浏览器的 CPU 兼容性问题做出针对性的优化。这时候 @icebob/cpu 这个 npm 包就显得非常有用。

    3 年前
  • npm包node-request-proxy使用教程

    简介 在前端开发中，常常需要与后端进行数据交互。然而，在一个大型的系统中，可能有很多个后端服务，相应的，前端也有很多个模块或页面需要调用这些后端服务提供的API。如果每个模块或页面都要自己写调用后端A...

    3 年前
  • npm 包 ngx-icons 使用教程

    在前端开发中，我们常常需要使用图标来进行界面设计，但是很多时候我们并没有设计师提供图标资源，因此我们需要从公共的图标库中获取。ngx-icons 是一个为 Angular 应用提供矢量图标解决方案的 ...

    3 年前
  • 使用babel-plugin-transform-es2015-modules-simple-desctructure-amd

    在现代的前端开发中，使用ES6的语法已经成为了不可避免的趋势，其中ES6的模块系统带来了不少便利，但是不可避免的会带来一些问题。其中的一个问题就是在使用RequireJS等AMD模块加载器的时候会出现...

    3 年前
  • npm 包 csv-config 使用教程

    在前端开发中，我们常常需要对 CSV 文件进行读取和写入的操作。csv-config 是一款能够方便快捷地解决 CSV 文件读取和写入问题的 npm 包。本文将为大家介绍 csv-config 的使用...

    3 年前
  • npm 包 direct-to-sides 使用教程

    在前端开发中，我们常常需要对图片进行裁剪、压缩等操作，而直接在客户端进行这些操作往往会让页面变得卡顿，反应变慢。这时候我们可以使用 direct-to-sides 这个 npm 包来解决这个问题。

    3 年前
  • npm 包 mock-pipe 使用教程

    在前端开发中，mock 数据是一个常见的需求。mock-pipe 是一个基于 Express 的 mock 工具，可以帮助我们快速方便地创建 mock 接口。下面是 mock-pipe 的使用教程。

    3 年前
  • npm 包 probot-gpg-status 使用教程

    在开发前端项目时，我们经常需要使用第三方库或工具来增加项目的功能或提高开发效率。npm 作为世界上最大的包管理器，为我们提供了便捷的方式来管理和使用这些第三方包。在本文中，我们将介绍 npm 包 pr...

    3 年前
  • npm 包 react-dispatchor 使用教程

    在前端开发的过程中，我们经常需要管理组件之间的通讯，例如换页时 A 组件需要通知 B 组件进行更新。在这种情况下，使用 dispatchor 可以轻松地处理组件之间的通讯任务。

    3 年前
  • npm 包 axios-on-rails 使用教程

    简介 axios-on-rails 是 axios 的一个 Rails 插件，使得在 Rails 应用中的数据请求更加方便，同时支持 CSRF 保护和自定义 header 参数。

    3 年前
  • npm 包 mooselog 使用教程

    前言 在前端开发中，我们常常需要记录日志信息，以便在出现问题时进行排查。在过去，我们多数采用 console.log 的方式进行日志输出。然而，这种方式对日志信息的整理和管理较为困难，尤其是在多人协作...

    3 年前
  • npm 包 redux-orm-angular 使用教程

    在前端开发中，管理数据非常重要。Redux-ORM 是一个使用类似关系数据库的方式来管理数据的 JavaScript 库，它可以与 Redux 配合使用，帮助我们更方便地管理数据。

    3 年前
  • npm 包 tap-bamboo 使用教程

    介绍 npm 包 tap-bamboo 是一个基于 tap 协议的测试工具，可用于测试前端代码。它支持在终端输出测试结果和生成多种格式的测试报告，同时还可以与 Bamboo 等持续集成工具配合使用。

    3 年前
  • npm 包 db2sock-itoolkit 使用教程

    简介 npm 包 db2sock-itoolkit 提供了一个方便的工具集，用于在 Node.js 应用程序中直接与 IBM i 数据库进行通信。它使用了 db2sock 协议，该协议是一种轻量级的 ...

    3 年前

相关推荐

    暂无文章