如今，拥有快速高效的大数据处理能力已经成为商业领域的首要竞争力。不同规模、不同行业的公司往往在项目中使用各种图表数据可视化工具，以醒目的方式直观地展示复杂的数据和信息。此类工具通常由开发人员在各种开源或商业JavaScript库的帮助下，在网站或网络应用程序中实现，并辅以各种实用功能。
基于JS图表库的图表编辑器使用户能够从零开始快速创建不同类型的图表。对于需要频繁更改数据的企业，无需编码就可以即时编辑图表。
接下来，我将向您介绍四个JavaScript库的图表编辑器，并深入讨论它们的功能、优缺点，以便Web开发人员和最终用户从中受益。
DHTMLX实时图表编辑器
DHTMLX图可用于以结构良好且易于配置的图的形式呈现数据。它有两个实时编辑器:组织结构图编辑器和图表编辑器。用户可以自定义它们并将其嵌入到网络应用程序中。
DHTMLX图表编辑器的用户界面看起来现代而友好。它包括带有按钮的工具栏、网格区域、左面板和右面板。
DHTMLX图表编辑器使最终用户能够在30多个预定义形状或流程图的帮助下创建各种图表和组织结构图，并可以使用侧面板来微调它们的外观。
如果需要使用其他类型的形状，可以通过代码直接将它们添加到编辑器中。DHTMLX提供了一些特殊的HTML模板，方便JavaScript初学者轻松创建各种形状。
在其界面左侧面板，不仅可以自定义形状，还可以找到预设的形状，拖放到网格区域的任意位置，通过各种连接器相互连接。在网格区域，用户可以根据需要调整每个选定形状的大小或旋转形状，并通过其工具栏对特定形状执行各种编辑操作。通过多选功能，用户还可以同时进行复制、粘贴、删除多个形状等基本操作。
其界面右侧面板包含各种设置图表参数的选项，如形状排列、颜色、大小、线条粗细和文本属性。因此，您可以根据需要更改设置，以赋予所选形状新的外观。Web开发人员还可以添加新的侧边栏，例如，为文件上传器定制图形，并为图形添加图像。
为了使整个图表构建过程更快，编辑器提供了自动布局算法。通过点击“自动布局”按钮，您可以使用这种智能技术将随机放置的形状立即排列成结构良好的图表。
界面顶部的工具栏包含几个按钮。您可以使用撤消/重做功能随时重置所有更改，还可以缩放应用程序并启用预览模式。
开发人员可以通过他们的应用编程接口添加其他控件。例如，您可以在编辑器中添加一个搜索栏，以根据特定条件查找所需的形状。通过API，还可以给形状的预览添加自定义面板，缩放时根据比例调整预览。
编辑完成后，只需点击一下，就可以从编辑器中将组织结构图和图表导出为JSON、PDF或PNG格式。当然，也可以导入JSON格式的文件。
您可以通过随附的详细文档和完整描述来参考不同类型的图表示例。例如，在编辑器中实现UML类图、网络图、决策树和活动图。
优点:
直观的用户界面，
灵活且可定制，
全面的文档和示例，
丰富的API，
纯JS，不需要依赖第三方，
能够定期更新并提供官方技术支持，
价格适中。
缺点:
为执照付费，
安装和微调编辑器时需要JavaScript知识。
yEd Live
YEd Live是一个基于网络的免费图表应用程序，可以用来构建、修改和自动排列任何复杂的图表。编辑工具是yEd桌面程序的在线版本，可以在支持流行浏览器的设备上运行。
YEd Live由德国软件公司yWorks GmbH设计，并由HTML的JavaScript图表库yFiles提供支持。yEd Live编辑器的用户界面，尤其是它的工具栏，太复杂了。对于从未使用过类似应用的用户来说，需要一些时间来了解。
编辑器为流程图、网络、BPMN、UML图等提供预定义的形状。它们都整齐地放在右侧面板中。当然，您也可以根据需要创建和添加形状，或者导入自定义面板。
对于特定形状的样式，编辑器允许您在“属性”菜单中更改其形状、大小、颜色、下划线粗细和文本。您可以为每个形状添加自定义描述和网址链接，以便当鼠标悬停在形状上时，会出现相应的提示信息。
你不必担心如何放置大量的图形。为了让图表在视觉上更有吸引力，编辑器内置的自动布局功能会根据你设置的标准设置不同类型的图形。其中，可选的布局模板包括分层、正交、圆形、树形、放射状等。
通过它上面的工具栏，不仅可以进行复制、粘贴、删除、撤销、重做等基本操作，还可以实现一些不常见的功能，如Toggle等轴向投影，即以3D形式直观地表示2D图纸。
yEd Live的其他功能包括:网格和对齐线的对齐辅助、支持GraphML、自动保存图表和内置搜索功能。
编辑后，您可以将图表导出为PDF、PNG和SVG格式。此外，您可以从各种云服务中保存和加载它，打印在纸上，甚至通过GitHub gists与他人共享。
yEd Live Editor的应用程序无法自定义以满足某些特定要求。您只能按原样将其嵌入到网络应用程序中。如果想得到功能类似的定制工具，只能借助HTML库的yFiles从头构建。
优点:
免费，
有了大量的自动布局，
许多预定义的形状和图标，
能够将图表保存到云中。
缺点:
文档支持不足，
只能按原样交付，不能定制。
更新很少。
Draw.io/Diagrams.net
Diagrams.net是一个开源的网络制图工具，可以用来免费构建、编辑和共享各种类型的图表。它使用JS库的mxGraph作为栈的基础。在draw.io中，您可以从头开始构建图表，或者上传现有的图表来自定义模板。
虽然这个应用的界面看起来很怀旧，但是可以提供丰富的功能。在左侧面板，可以找到不同类型的形状库，可以实现流程图、UML、BPMN图、网络图等结构。除了各种预定义的形状和图标，您还可以添加光栅和SVG图像，并创建自定义形状和库。此外，左侧面板中的pad功能使您可以轻松添加常用形状。
无论是从空白页还是模板开始，都可以在画布上添加各种形状，使用拖放功能替换现有形状，或者双击某个形状将其移动到新创建的绘图中。同时，您还可以使用搜索栏更快地找到某个视觉元素。
您可以通过两种不同的方式直接绘制图形连接线:使用带有蓝色箭头的浮动连接，或将鼠标悬停在形状上以显示固定连接点。此外，您可以从左侧面板添加相应类型的连接器。
在画布上，您可以调整形状的大小或旋转形状，对多个形状进行分组以同时使用它们，或者添加文本。右侧的格式面板包含编辑样式的选项。您可以使用颜色渐变功能来填充形状、添加阴影、编辑文本内容以及更改形状的排列。
编辑器顶部的工具栏允许您修改形状和连接线的外观，插入各种元素，将形状放在前面或后面，以及设置可见和隐藏效果。此外，您可以使用其自动布局功能在预定义的条件下正确排列各种图表。
Draw.io提供多种文件导入格式，包括Gliffy、VSDX、PNG、SVG和JPEG。您可以从各种来源上传，如谷歌驱动器、GitHub、DropBox和电脑文件夹。借助Gliffy或Visio等工具，可以将构建好的文件导入到draw.io中，以draw . io原生图的方式进行修改。
在导出端，draw.io可以保存XML、VSDX、PDF、SVG、HTML、PNG、JPEG等格式的图表。此外，还可以将编辑好的图表直接发布为URL供在线用户分享，并与Google Drive进行集成编辑和实时协作。
优点:
免费，开源，
支持多种导入导出格式，
提供了多种预定形状，
您可以从不同的来源导入自定义形状，
提供插件集。
缺点:
界面定制不足，
界面设计有些过时，
连接形状的方法很麻烦，
仅提供非结构化文档，
技术支持不足。
Rappid
Rappid是开源JointJS Core JavaScript库的商业扩展。它通过附加的UI小部件和其他实用扩展提供了丰富的功能。你可以通过一个“厨房水槽”的例子了解它的功能。
编辑器在界面上提供了三种不同的外观:现代、黑暗和材质。左侧面板中可供选择的形状不多，但您仍然可以创建标准流程图、BPMN图、UML图和组织结构图。同时，还可以使用SVG创建自定义形状。
您可以通过拖放将各种可用的形状添加到画布中。但是，如果要同时放置多个形状，可能会不方便。您可以通过简单的基本操作轻松重置、旋转、调整大小或连接图形。
创建或编辑复杂的数据密集型图形时，可以使用屏幕右下角的“概述”窗口浏览各种形状，并根据需要进行更改。此外，Rappid的自动布局功能可以重新排列您的图表，使其更加美观。
同时，您可以通过更改形状、字体大小、装饰填充和轮廓来调整图形和连接线的样式，并向图形添加自定义数据。
在导出端，编辑器可以保存为JSON、PNG、JPEG、SVG等格式。此外，通过嵌入第三方工具，Rappid还可以实现撤销/重做、对齐、验证器、缩放和平移、打印、多选等功能。
优点:
有三种“皮肤”可供选择。
方便的导航栏，
提供一个插件集，
反应能力强，
能够定期更新并提供官方技术支持。
缺点:
为执照付费，
其功能的实现依赖于jQuery、Lodash和主干网。
JavaScript图表编辑器的优点和缺点
