Basic Primitives Diagram 是一个 100% JavaScript 组件库,用于构建通用和组织图,无需手动节点布局。它适用于所有主流浏览器、Chrome、Edge、Firefox、Safari 和移动浏览器。支持 VML 和 SVG 模式下的图形渲染,具体取决于浏览器。Basic Primitives 非常适合实现组织结构图、多父层次结构图、家族图、继承、依赖关系树、业务所有权图和 PERT 图的依赖关系可视化和分析。它为自动布局定制和可视节点注释提供了丰富的功能集。通过完整的 API,您可以在图表创建后随时添加、删除和修改单个项目并更改许多其他属性。小部件更新时间与其导航一样快。
Basic Primitives Diagram支持的图表
层次可视化。
组织结构图。
多父层次图。
家谱。
依赖关系图。
PERT 图表。
Basic Primitives Diagram
纯 JavaScript
100% 客户端 JavaScript 布局和渲染。
以纯 JavaScript 实现,不依赖 3d 方库。
Basic Primitives Diagram适用于所有主要的现代浏览器 Internet Explorer、Edge、Chrome、Firefox、Safari 和移动浏览器。支持 SVG 中的图形渲染。
PDF 支持
100% 浏览器内 JavaScript 或基于 NodeJS PDF 渲染的 PDFkit (MIT) 库。
打开
Basic Primitives Diagram 的主要功能之一,根据许可,您可以下载源代码并进行自己的编辑。这允许个人修改和很大的灵活性。全面的示例、演示和单元测试集保证了库源代码的质量。
Basic Primitives Diagram促进分层和拓扑依赖关系的可视化数据分析
商业智能系统和应用程序设计用于两个主要领域:报告和分析。报告申请是法律声明,因此报告的数据应 100% 完整,不应有遗漏数据、不正确舍入值或过多缩写形式的任何差异。另一方面,为数据分析设计的应用程序应该只显示当前用户关注的最有价值和最相关的数据,并优雅地降低相关性较低的数据的细节。所以控件为图表的可视化数据分析提供了 API 选项:
自动布局
Basic Primitives Diagram在图形编辑器中绘制的图表的主要问题是布局上的项目分布稀疏。节点之间的巨大间隙使图表难以概览、编辑和导航。有时图表太大以至于项目之间可能有屏幕大小的间隔。这个问题使可视化图表的整个想法变得毫无用处。同时,计算机 UI 允许将可视化缩放并适应屏幕,但在这种情况下,项目会变得很小且不可读。我们组织结构图和其他图表可视化方法的主要目标是解决这些问题并同时充分利用它们。小部件找到了在可用屏幕空间内显示大型层次结构的最佳方式,无需滚动或最小滚动而不影响可用性。
图表形状概述。小部件最小化项目以使图表可视化适合可用的屏幕空间,并为用户提供概览一般图表布局的可能性。
用户焦点导航逐节点进行。图表显示光标项及其邻居全尺寸并最小化所有其他不太相关的节点。通过单击相邻节点,用户将感兴趣的焦点移动到图表的新选择部分。
固定图表中的项目。所有选中/选中标记的项目始终显示为全尺寸,所有其他项目保持最小化,因此它允许在不同的分支中固定/选择项目并在可用的屏幕空间内并排显示它们以进行位置比较。
图表设计一致性。无需用户手动编辑的自动布局提供了所有图表文档的视觉一致性。所有用户都有不同的技能和偏好,因此自动布局提供了一致的图表可视化。
始终保持最新。您的应用程序图表不会受到 Widget 布局算法和应用程序数据变化的影响。您的可视化将始终保持最新并与您的数据同步。
注释
每次我们对图表进行更改时,我们都需要可视化执行的修改,否则很难跟踪修改前后的更改。因此,为了可视化图表从一种状态到另一种状态的转换,提供了注释。注释是附加到图表节点的 API 元素,绘制在它们的前面或背景中。注释不会改变节点的位置,因此控件会在没有图表布局的情况下立即重绘它们。注释的一般逻辑是它们不应该为图表中的每个节点显示,应用程序应该在当前用户光标或操作的上下文中创建它们并添加到图表中,用户使用数据执行。与图表布局本身相比,注释具有最小的冲突解决能力。因此,使用过多的注释很容易使图表混乱。但是当我们需要添加特定于上下文的视觉效果时,它们会非常方便。