• GoJS图表组件介绍

     

    GoJS是一个JavaScript库,可让您在现代Web浏览器中轻松创建交互式图表。

    GoJS支持图形模板和图形对象属性的数据绑定到模型数据。您只需要保存和恢复模型,该模型由简单的JavaScript对象组成,其中包含您的应用所需的任何属性。许多预定义的工具和命令实现了大多数图表所需的标准行为。外观和行为的自定义主要是设置属性的问题。

     

    使用JS和TS为Web构建图表

    01

    流程图

     

     

    构建交互式流程图或流程图。让您的用户使用 JSON 模型输出构建、修改和保存图表。

    02

    状态图

    可视化状态图和其他行为图。创建带有实时更新的图表以监控状态,或创建交互式图表以进行规划。

    03

    桑基图

    GoJS允许大量自定义链接和节点来构建各种图表。可视化流动,或连接管道。

    04

    家系图

    创建Genogram和Medical图表,或具有可折叠级别的可编辑家谱。

    05

    组织结构图

    创建用于查看或编辑的经典组织结构图。自动布局使不同的可视化选项变得容易。

    06

    动态端口

    动态添加端口和自定义链接路由。使用数据绑定在模型JSON中保存和加载路由。

    07

    工业过程

    对工业流程、工作流、SCADA 图等进行建模。当您的用户构建图表时,权限和验证可以轻松添加规则和约束。

    08

    动态分组

    将组用作容器和子图,组成员受其自己的规则和布局约束。

     

    内置功能和交互性

    01

    自动布局

    GoJS包含几个内置布局,以及许多要使用或调整的自定义布局示例。

    02

    节点和模板

    快速设置图表部件的外观,同时保持外观与数据分离。

    03

    数据绑定

    GoJS模型可以自动使您的数据与您的显示保持同步,反之亦然。

    04

    撤销重做

    GoJS有内置的状态管理来记录图表和模型更改的历史。用户可以轻松撤消和重做,取消的工具操作可以回滚。可以检查此状态以进行进一步的定制。

    05

    键盘快捷键

    GoJS实现了许多可以自定义的常用键盘命令和手势。

    06

    子图

    GoJS组提供子图以将不同的规则或布局应用于其成员。

    07

    可拓展工具

    GoJS输入通过可定制和扩展的工具进行路由,从而为您的用户提供他们需要的交互。

    08

    可定制的事件和权限

    当用户执行某些操作或按键时执行自定义逻辑或通知,或者完全禁用不同的交互。

    09

    上下文菜单和提示

    GoJS具有内置的上下文菜单和工具提示,可以在画布中或使用 HTML 进行扩展。

     

    与现代框架兼容

    React

    GoJS图表设置组件的 简单方法是使用gojs-react包,它为GoJS图表、调色板和概览导出React组件。

    Angular

    GoJS图表设置组件的 简单方法是使用gojs-angular包,它为GoJS图表、调色板和概览导出Angular组件。可以在 NPM页面上找到有关该包的更多信息,包括它所需的各种道具。

    Vue

    一个用于构建Web用户界面的平易近人、高性能且通用的框架。