内容导航
产品标签

ScheduleJS

用于JavaScript应用程序的灵活交互式甘特图。

以下是 "产品特征",如果您需要了解更多信息,您可以联系我们。


Image   重新安排活动、更改值、开始或结束时间。

拖放功能允许使用默认用户输入法与图表进行图形交互。首先,只需将您的活动定义为“可变”即可启用此功能。拖放式API允许访问多个方法和接口,以便在操作的每一步微调活动行为,例如限制水平拖动、启用活动边界编辑操作、实现验证机制、以编程方式影响其他活动以及对外部信息作出反应。您可以根据正在拖动的活动的类型和状态来设计特定的行为。

Horizontal
Image

Vertical
Image

Multidirectional
Image

Edit Activity Duration
Image

Custom
Image


Image   无缝放大和缩小,并微调缩放操作。

ScheduleJS提供了直观的放大和缩小图形的方法,以及经过深思熟虑的API来操作缩放操作。首先,您可以使用时间线放大和缩小。有几种方法可以做到这一点,即双击一个时段(如特定的一天),或者直接在其上的时间间隔上进行拖放选择。在具有触觉屏幕的设备上,您可以用手指进行捏缩放。对于桌面用户,在使用鼠标滚轮的同时使用ctrl修饰符键也会根据鼠标位置放大和缩小。缩放API允许您设置最大和最小缩放范围的边界,在缩放操作期间收听和提供信息,以编程方式触发特定时间间隔的放大和缩小,根据缩放级别设置图形分辨率。

 Zoom Timeline
Image

Select Timeline Period
Image

Zoom Using Mouse Wheel
Image

Zoom using the API
Image


Image   使用多种布局模式显示活动。

◆ ScheduleJS提出了四种布局模式:
  • “甘特图”布局:提供开始时间和结束时间以在时间线上显示工期。创建具有类型化关系的特定活动链接,如开始到结束、结束到开始、端到端等。
  • “议程”布局:用所选时间间隔的垂直偏移周期填充行。
  • “图表”布局:为活动注册一个附加值,以显示相对于行上其他图表项的活动高度。图表布局带有可自定义的垂直刻度,可向用户提供定量信息。
  • “高低图”布局:为活动提供两个附加值,以创建一个具有高值和低值的“烛台”。

  • Gantt Layout Modes
    Image

    Chart Layout Modes
    Image

    Agenda Layout Modes
    Image


    Image    为活动定义一种独特的呈现方式。

    ScheduleJS通过使用内部活动渲染器绘制图形上可见的每个像素。ActivityRenderer API旨在为开发人员提供扩展的灵活性。ScheduleJS提供了一组广泛的入口点,并允许开发人员覆盖所有相关方法,以设计在屏幕上呈现活动的特定方式。默认的渲染类包括一大组用于添加逻辑和微调图形的工具,但您也可以使用HTML Canvas API、HTML元素、图像、文本和动画来全面设计渲染方法。呈现方法从活动对象继承任何数据,以便构建唯一的交互和断点。ScheduleJS提供了四个默认的活动渲染器和两个链接渲染器。

    Dynamic Activity Rendering
    Image

    Activity Bar Renderer

    Image


    Chart Activity Renderer
    Image

    Custom Renderers

    Image


    Image   日历活动用于在图形上勾勒特定区域。

    日历活动显示在行的背景上。它们可以标记诸如周末、节假日、特殊事件等时期。日历活动始终显示为只读,这意味着用户不能以交互方式编辑它们,而应该以编程方式修改它们。在引擎盖下,日历活动是使用背景系统层绘制的。

    Weekend Calendar Activities
    Image

    Custom Calendar Activities
    Image


    Image   ScheduleJS提供了一组广泛的事件、方法和可观测值来对用户操作做出反应。

    ScheduleJS中的事件处理是库的核心。我们提供了一组丰富的事件、方法和可观察性,您可以使用它们来设计量身定制的用户体验。每个用户输入,如选择活动、移动时间线、更改缩放级别、使用拖放功能、展开和折叠特定行、悬停和单击,都实现了实时观察相关状态的方式,以设计高级交互。

    Timeline Events

    Image


    Drag and Drop Start Events

    Image


    Edit Mode Events
    Image

    Activity Editing Events
    Image

    Image   活动链接描述两个活动之间的关系。

    活动可以使用ActivityLink API相互附加。可以为链接指定以下四种关系之一,说明绘制链接的原点及其目标:
  • End to Start
  • End to End
  • Start to End
  • Start to Start
  • 链接作为独立对象存在于图形中,包含对相关活动(起点和终点)的引用,允许使用活动引用访问底层数据。链接是使用链接渲染器绘制的,并且可以通过替代渲染器绘制方法进行完全自定义。

    End to Start Link Type
    Image

    Curved Link Renderer
    Image

    Straight Link Renderer
    Image