当前位置:  首页 数码 详情

以JS图表库为基础的图表器

发布来源:互联网    发布时间:2020-08-04 15:23

如今,具有快速高效的大数据处理能力,已经成为了商业领域的首要竞争力。不同规模和行业的公司在其项目中,往往会用到各种图表类数据可视化工具,在视觉上以引人注目的方式展示出复杂的数据与信息。而此类工具通常是由人员在网站或Web应用中,借助各种开源的、或商业化的JavaScript库,并辅以各种实用功能来实现的。

以JS图表库为基础的图表器(图1)

以JS图表库为基础的图表器(Diagram Editors)能够让用户迅速地从零开始创建不同类型的图表。而对于需要频繁更改数据的企业而言,他们还能够在无需编码的情况下,即时对图表进行。

下面,我将向您介绍四种JavaScript库的图表器,深入讨论它们的功能和优缺点,以便Web人员和最终用户能够从中受益。

以JS图表库为基础的图表器(图2)

DHTMLX图表器的用户界面看起来既现代又友好。它包括:带有按钮的工具栏、网格区域、左面板和右面板。

DHTMLX图表器能使最终用户在预定义的30多种形状或流程图的帮助下,创建出各种图表和组织架构图,并可以使用侧面板来微调其外观。

如果您需要使用其他类型的形状,则可以直接通过代码,将其添加到该器中。DHTMLX了一些特殊的HTML模板,以方便JavaScript初学者轻松地创建各种形状。

在其界面的左侧面板上,您既可以自定义形状,又找到预设的形状,并将其拖放到网格区域内的任意位置,并通过各种连接器来相互连接。在网格区域中,用户既可以对每个选定的形状调整大小或按需旋转,又可以通过其工具栏对特定的形状执行多种操作。凭借多重选择功能,用户还可以同时对几种形状执行复制、粘贴、删除等基本操作。

在其界面的右侧面板上包含了用于设置图表参数的各种选项,例如:形状排列、颜色、大小、划线粗细和文本属性。因此,您可以按需更改设置,以为选定的形状赋予新的外观。Web人员还可以添加新的侧边栏,例如:为文件上传器自定义图形,并将某个图像添加到该图形中。

为了让构建图表的整个过程更加快捷,该器了一种自动布局的算法。通过单击“自动布局”按钮,您可以使用该智能技术,立即将那些被随机放置的形状,排列到某个有着良好结构的图表中。

其界面的顶部工具栏包含了多个按钮。您既可以使用撤消/重做功能,来随时重置所有的更改,又可以实现应用的缩放,并启用预览模式。

人员可以通过其API添加其他的控件。例如:您可以为器添加搜索栏,以根据特定的条件查找所需的形状。通过API,您还可以为形状的预览添加自定义的面板,并在缩放时根据比例来调整该预览。

在完成后,您只需一次单击,即可从器中将组织结构图和图表导出为JSON、PDF或PNG格式。当然,您也可以导入JSON格式的文件。

优点:

直观的用户界面。

灵活可定制。

全面的文档和示例。

丰富的API。

纯JS,无需依赖第三方。

价格适中。

缺点:

付费获取许可证。

安装和微调器时,需要JavaScript知识。

以JS图表库为基础的图表器(图3)

yEd Live由德国软件公司yWorks GmbH设计,并通过JavaScript图表库yFiles for HTML支持。yEd Live器的用户界面,尤其是其工具栏的功能过于繁杂。这对于从未使用过类似应用的用户而言,需要花费一些时间来进行了解。

该器为流程图、网络、BPMN(业务流程建模与标注)以及UML图等了预定义的形状。它们都被整齐地放置在右侧面板中。当然,您也可以按需创建并添加形状,或导入自定义的面板。

您无需担心如何放置大量的图形。为了使图表在视觉上更具吸引力,该器内置的自动布局功能,会根据您设置的标准,设置不同类型的图形。其中,可选择的布局模板包括:分层、正交、圆形、树形、放射状等。

通过其上方的工具栏,您不仅可以执行诸如:复制、粘贴、删除、撤消、重做等基本操作,还可以实现一些不常用的功能,例如:Toggle等轴投影(isometric projection)即直观地以3D形式表示二维图。

yEd Live的其他功能还包括:针对网格和对齐线的对齐辅助器,对GraphML的支持,自动保存图表,以及内置的搜索功能。

完成后,您可以将图表导出为PDF、PNG和SVG格式。此外,您还可以从各种云服务(如Dropbox、Google Drive、以及OneDrive)处进行保存与加载,打印到纸上,甚至可以通过GitHub的gists与他人共享。

yEd Live Editor的应用程序无法通过定制,来适合某些特定的要求。您只能按照原样将其嵌入到Web应用中。如果您想获得具有类似功能的定制工具,则只能借助yFiles for HTML库,从头开始构建。

优点:

免费。

带有大量的自动化版式。

缺点:

文档支持不足。

仅能按原样进行交付,无法自定义。

以JS图表库为基础的图表器(图4)

该应用程序的界面虽然看似比较怀旧,但是能够丰富的功能。在其左侧面板上,您可以找到不同类别的形状库,可实现流程图、UML、BPMN图、网络图等结构。除了各种预定义的形状和图标,您还可以添加光栅(raster)和SVG图像,并创建自定义的形状与库。此外,其左侧面板中的便签本功能,可方便您添加常用的形状。

无论是从空白页面,还是从模板开始,您既可以将各种形状添加到画布上,也可以使用拖放功能来替换现有的形状,或者通过双击某个形状,以将其移动到新建的图形中。同时,您也可以利用搜索字段,来更快地找到某种视觉元素。

您可以通过两种不同的方式,来直接绘制图形的连接器:使用带有蓝色箭头的浮动连接,或是通过将鼠标悬停在某个形状上,以出现固定的连接点。此外,您还可以从左侧的面板处添加对应类型的连接器。

在画布上,您既可以调整形状的大小或旋转之,又可以对多个形状进行分组,以便同时使用它们,或添加文本。其右侧的“格式面板”包含了用于样式的选项。您可以使用颜色渐变功能来填充形状,添加阴影,文本内容,以及更改形状的排列。

draw.io了包括:Gliffy、VSDX、PNG(带有XML)SVG、JPEG在内的多种文件导入格式。您可以从诸如Google Drive、GitHub、DropBox、以及PC文件夹等多种处进行上载。在Gliffy或Visio之类工具的帮助下,您可以将已构建的文件导入draw.io中,以draw.io原生图表的方式进行修改。

优点:

免费,开源(Apache 2.0)

支持多种导入和导出格式。

多种预定义的形状。

能够从不同的导入自定义的形状。

插件集。

缺点:

界面定制化不足。

界面设计有些过时。

连接形状的方法比较繁琐。

仅非结构化的文档。

技术支持不足。

以JS图表库为基础的图表器(图5)

该器在界面上了现代、深色、材质三种不同的外观。其左侧面板中可供选择的形状并不多,不过您依然可以创建标准的流程图、BPMN图、UML图,以及组织结构图等。同时,您也可以使用SVG来创建自定义的形状。

您可以通过拖放的功能,将各种可用形状添加到画布上。不过,如果您想一次性放置多个形状的话,则可能会有些不便。您可以通过简单的基本操作,方便地对图形进行重置、旋转、调整大小或连接。

在创建或复杂且数据密集的图形时,您可以利用屏幕右下角的“概览”窗口,来浏览多种形状,并按需进行更改。此外,Rappid的自动化布局功能,也可重新排列您的图表,使之更加美观。

在导出方面,该器可以保存为JSON、PNG、JPEG、以及SVG等多种格式。此外,通过第三方工具的嵌入,Rappid还可以实现:撤消/重做、对齐线、验证器、缩放和平移、打印、以及多选等功能。

优点:

三种“皮肤”可供选择。

方便的导航栏。

插件集。

响应能力强。

缺点:

付费获取许可证。

其功能实现取决于jQuery、Lodash和Backbone(MIT)

本文相关词条概念解析:

图表

在对统计信息在可视化时的基本属性进行分析与研究后,图表的定义:图表泛指在屏幕中显示的,可直观展示统计信息属性(时间性、数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地可视化的手段。图表设计隶属于视觉传达设计范畴。图表设计是通过图示、表格来表示某种事物的现象或某种思维的抽象观念。

相关资讯

相关推荐

  • 一束光,也激发出了一个世界级产业

    一束光,也激发出了一个世界级产业

    一次视觉技术。文丨华商韬略 黑森林11884年,世界第一台机械电视技术原型的发明人尼普科夫,在专利申请书首页这样写道:这里所述的仪器能使处于A地的物体,在任何一个B地被看到。第一台机械电视原型这句平平

    09-21
  • OPPO,发布,手机——Reno4,SE,采用,64,瓦超级闪充

    OPPO,发布,手机——Reno4,SE,采用,64,瓦超级闪充

    OPPO 正式发布了 2000 元价位的新品 5G 手机—Reno4 SE。而本次 OPPO Reno4 SE,在外观上有着独特的 “小光芒” 设计,以及 169g 重量、7.85mm 的厚度带来的轻

    09-21
  • 挑选来自全球不同地域的优质好货,聚划算,汇聚打造了数码家电专场活动

    挑选来自全球不同地域的优质好货,聚划算,汇聚打造了数码家电专场活动

    国庆假期近在眼前。今年在中秋、国庆双假叠加的大背景下,消费市场有望迎来一波新的高潮。以往每年国庆期间,数码消费都展现出较强的活力。今年受疫情影响,出境旅游受到一定影响。为了让消费者足不出户买到全球优质

    09-21
  • 玩直播,玩好中国风,奢侈品尝试中国风频触雷

    玩直播,玩好中国风,奢侈品尝试中国风频触雷

    迪士尼真人《花木兰》从上映前,相关话题流量就一直居高不下。而当大IP撞上迪士尼,国风热潮瞬间引发,迪士尼与英国鞋牌Irregular Choice合作推出的迪士尼公主花木兰主题系列鞋、包,却让人一言难

    09-21
  • 江小白的成功主要靠的就是文案

    江小白的成功主要靠的就是文案

    江小白2011年创立。不到10年的时间,企业的收入便达到了30亿元,覆盖了80%的中国区域市场,企业规模跻身中国白酒行业企业前20强行列。并且,这个成绩是在近几年白酒行业面临持续下行、很多行业企业业绩

    09-21
  • 一个人的微信头像,他们是什么心态

    一个人的微信头像,他们是什么心态

    你是不是有这样的时候:打开微信,想要找某个熟人或者朋友聊天,发现找不到了。找了很久,才发现,对方把微信名也改了,微信头像也改了,都已经面目全非了。常常修改微信头像和微信名,是一个人的自由,别人没有干涉

    09-21

网友评论