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