内容导航
  • Basic Primitives Diagram
产品标签

Basic Primitives Diagram

HTML/JavaScript 组织结构图

以下是 "Basic Primitives Diagram",如果您需要了解更多信息,您可以联系我们。

通过完整的 API,您可以在创建图表后随时添加、删除和修改单个项以及更改许多其他属性。小部件更新时间和它的导航一样快。Basic Primitives Diagram. 是一个100% javascript 组件库,用于构建通用图,而不需要手动节点布局。 它适用于所有主要浏览器、Internet Explorer、Chrome、Firefox、Safari和手机游览器。根据浏览器的不同,支持在 VML、SVG 和 Canvas 模式下进行图形渲染。非常适合显示大型层次结构图可视化、纸质组织结构图、多父层次结构图、家谱图、依赖关系图和PERT图。 BasicPrimities 与 jQuery UI Dragable & Droppable 可拖动和拖放相互配合使用。


Image


■ 支持的图表

  • 层次可视化图表
  • 组织结构图
  • 多父层次结构图
  • 家谱图
  • 依赖关系图
  • PERT 图
  • 财务所有权图


Image

Image

Image

Image

Image

Image


■ 纯 JavaScript

  • 100%客户端 javascript 布局和呈现。
  • 在纯 JavaScript 中实现,不依赖于 3D 参与方库。
  • 适用于所有主要的现代浏览器 Internet Explorer、Edge、Chrome、Firefox、Safari 和手机浏览器。支持 SVG 和画布模式下的图形渲染,具体取决于用户选项。


Image

Image


■ PDF 支持

  • 浏览器或 NodeJS 基于 PDF 呈现的 PDFKIT(MIT)库中的100% JavaScript。


Image


■ Open

  • 基本原语图的一个关键特性,在许可证下您可以下载源代码并进行自己的编辑。这允许个人修改和极大的灵活性。完整的样本、演示和单元测试集保证了库源代码的质量。


Image


■ 促进层次和拓扑依赖关系的可视化数据分析

商业智能系统和应用程序设计用于两个主要领域:报告和分析。报告申请应是一份法律声明,因此报告的数据应100%完整,不应存在遗漏数据、不正确的四舍五入值或过度缩写形式上存在的任何差异。另一方面,为数据分析而设计的应用程序应该只向当前的用户集中显示最有价值的相关的数据,并优雅地降低不相关数据的细节。因此,控件为图表的可视数据分析提供了API选项。


■ 自动布局

在图形编辑器中绘制的图表的主要问题是布局上项目的稀疏分布。节点之间的巨大间隙使图表难以概述、编辑和导航。有时图表太大,项目之间可能有屏幕大小的间隔。这个问题使得可视化图表的整个想法毫无用处。同时,计算机用户界面允许在屏幕上缩放和调整可视化效果,但在这种情况下,项目变得小而不可读。我们组织结构图和其他图表可视化方法的主要目标是解决这些问题,同时充分利用它们。这个小部件找到了在停止或滚动并不影响可用性的情况下,在可用屏幕空间中显示大层次结构的最佳方法。


Image


  • 图表形状概述。小部件最小化项目,以便将图表可视化放入可用的屏幕空间,并为用户提供概述一般图表布局的可能性。
  • 用户焦点导航逐节点进行。图表显示光标项及其相邻项的完整大小,并最小化所有其他不太相关的节点。通过单击相邻节点,用户将把感兴趣的焦点移动到图中新选择的部分。
  • 固定图表中的项。所有选中/选中标记的项目始终显示为全尺寸,所有其他项目保持最小化,因此它允许固定/选择不同分支中的项目,并在可用屏幕空间内并排显示以进行位置比较。
  • 图表设计的一致性。 没有用户手动编辑的自动布局提供了所有图表文档的视觉一致性。 所有用户都有不同的技能和偏好,因此自动布局提供一致的图表可视化。
  • 始终在更新。 应用程序图不会受到小部件布局算法和应用程序数据更改的影响。您的可视化效果将始终是最新的,并与您的数据同步。


■ 注释

每次更改图表时,我们都需要可视化执行的修改,否则很难跟踪修改前后的更改。所以为了可视化图表从一个状态到另一个状态的转换,控件提供了注释。注释是附加到图表节点上的API元素,绘制在它们的前面或后面。 注释不会更改节点的位置,因此控件会在不使用图表布局的情况下立即重新绘制它们。注释的一般逻辑是它们不应该为图中的每个节点显示,应用程序应该创建它们并在当前用户光标或操作的上下文中添加到图中,用户使用数据执行。与图表布局相比,注释本身具有最小的冲突解决能力,所以很容易使带有过多注释的图变得杂乱无章。但当我们需要添加特定于上下文的视觉效果时,它们非常方便。


Image

Image


■ 为最常见的事例提供简单的 API

  • 默认项模板-允许使用定义的最小选项呈现第一个图表。
  • 选择复选框-提供类似于常规树和列表控件的选择 API。
  • 用户按钮面板-在布局上下文面板中自定义按钮。
  • 垂直节点标题。
  • 标签。


■ 用于更复杂用例的灵活 API

  • 自定义项、突出显示和光标内容模板。
  • 自定义布局父/子关系类型:顾问、助手和各种合作伙伴。多个家长、多个经理或联席主管可视化。
  • 自定义子级和叶布局:垂直、水平和矩阵。
  • 左/右布局对齐支持。
  • 事件。


■ 兼容性

  • 在 jQuery UI widgets 中工作。
  • 支持使用嵌套的 jQuery UI Widgets 自定义关系图节点。
  • 与 jQuery UI Dragable 和 Droppable 一起工作。
  • 在 AngularJS 指令中工作。
  • 在 ReactJS 中工作。
  • 在 ASP.NET 控件中工作。


■ 动态性

  • 通过完整的 API,您可以在组织结构图呈现后的任何其他时间添加、删除和修改单个项及其属性。小组件更新时间和它的导航一样快。