在许多情况下，以易于消化的引人入胜的格式展示数据可以带来很多好处。WordPress 的图形小工具可以让您将原始数据和统计信息转化为具有吸引力的可视化信息显示。大多数情况下，这将以插件的形式出现，让您可以在 WordPress 中处理这些数据。
在本篇文章中，我们将探讨 WordPress 的图形小工具，包括可以使用的不同类型、使用它们的场合等。在文章的后半部分，我们将介绍一些可以帮助你实现图形小工具的插件，然后向你展示如何根据自己的需要使用其中的一个。
了解 WordPress 中的图形小工具
网站（包括使用 WordPress 的网站）使用两种类型的小工具：图形小工具和基于文本的小工具。典型的文本小工具可以吸引人，但图形小工具会以更吸引人的格式显示信息。
网站前端的折线图图形小工具。
这些小工具具有动态组件，可使用不同的视觉表现形式，如图表、图形、地图和进度条等，一目了然地传达复杂的信息。这可以帮助您更好地与读者沟通，进而帮助他们快速理解和解释您的数据。它还可以提高用户参与度和留存率。
虽然展示数据的方式多种多样，但图形小工具有几个共同点：
- 它们将以动态的方式显示数据。
- 您可以提供互动元素，帮助用户深入了解您的数据。
- 无论您的网站设计如何，您都可以定制与之相匹配的小工具。
- 在很多情况下，您都可以提供实时更新的数据。
然而，图形小工具并不是为网站增添视觉效果的全部。它们是原始数据可视化和互动的重要组成部分。
为什么图形小工具可以帮助您进行现场数据展示
使用图形传达信息有很多好处。总体而言，可视化内容是一门大生意，对网络营销来说超级重要。
对于您和您的数据来说，还有很多其他积极因素值得注意：
- 增强数据可视化。复杂的数据集可以更容易访问，让用户快速掌握趋势和模式。它们还可以通过使用多功能、适应性强、易消化的可视化格式来简化您提供信息的方式。
- 提高用户参与度。互动元素让用户有机会延长现场时间，提高整体参与度。
- 专业美学。如果设计得当，小工具可以提升网站的视觉吸引力。这种精致而专业的外观可以为您的数据展示带来优势。
在任何领域，视觉信息往往比文字信息更有优势，这意味着您可以用一种让关键数据点深入人心的方式来展示它们。因此，在网站上以正确的方式使用它们是重中之重。
何时在 WordPress 网站上使用图形小工具
过多的好东西会变得重复和饱和。这意味着您需要小心谨慎地使用图形小工具。
好消息是，您可以在很多情况下使用图形小工具。当您需要为读者简化复杂的概念时，就是使用图表的最佳时机。不过，还有其他一些特殊情况：
- 呈现复杂的数据集，需要展示大量数据或数据点之间错综复杂的关系。
- 突出随时间变化的趋势，显示不同时间段数据的变化或模式。您甚至可以展示目标、里程碑或增长指标。
- 比较多个变量，说明不同数据类别之间的关系或差异。
- 展示特定地点的地理数据，或数据需要空间背景的地方。
在需要用户互动的地方，如动态报告或其他仪表盘，甚至可以使用图形小工具。关键是要确定，与其他方法相比，以可视化方式显示数据是否能增强对数据的理解和参与。
简而言之，如果可视化格式能为您的数据提供价值和清晰度，那么它就很可能适合图形小工具。
WordPress 图形小工具的不同类型
数据可视化本身有多种形式，每种显示类型都适合不同的数据和展示需求。在此，我们不会详细介绍每种数据展示方式，但有几个典型的突出选项值得注意。
条形图、饼图、折线图和面积图等典型图表和图形始终是数据可视化的首选。这些都是主要的方法：
维基百科网站显示的页面总浏览量指标条形图。
散点图比较复杂，但可以显示两个变量之间的关系：
英国电影学院（BFI）提供的票房指标散点图。
地图的形式多种多样。热图有一些特殊的用例，但会使用颜色梯度来显示数据集的强度。交互式世界地图可以很好地满足基于地点的互动需求：
WordCamp 主网站在嵌入式互动地图上标注了全球各地的所有活动。
计数器和进度条更适合里程碑式的成就。在这里，您可以使用数字计数器，通过动态计数得出最终值。圆形进度条可以帮助展示完成百分比。您也可以使用线性水平或垂直进度条：
WordPress GitHub 官方页面上的社区标准洞察显示了一个与下方任务列表相关的公共进度条。
即使是图片库、灯箱和滑块也能帮助你通过多个幻灯片、叠加或几乎是故事驱动的事件来展示数据。这也是时间线可视化和流程可视化发挥作用的地方。在摄影教程网站上经常能看到的一种数据可视化类型是前后对比。
使用动态互动的前后滑块可以帮助你展示两张相似图片之间的差异。
您可以使用一个动态滑块来比较两张图片的不同版本，该滑块可以拖动图片，显示另一张图片。在你的使用案例中，它的作用可能不大，但请记住，每一种可视化类型都有其理想的应用。
图形小工具的使用场合（包括示例）
使用哪种可视化类型很重要，但如何使用（以及在哪里使用）也很重要。也就是说，在不同的应用中，使用图形小工具会有很大的好处。
你会发现，除了典型的使用案例外，还有一些你经常看到却不会与数据可视化联系在一起的应用。在接下来的几节中，我们将介绍其中的几种用途。
商业应用
图形小工具的常用实现方式之一就是展示关键指标。对于企业来说，这显然是一种以吸引人的方式展示数据的好方法。条形图通过正确的坐标轴值便于阅读，有助于直观显示一段时间内的销售趋势或比较不同的产品或服务。
数以百万计的公司都使用条形图来展示年度收入增长情况，塔吉特公司就是其中之一：
Target 使用条形图来比较多个数据点的同比业绩。
这也展示了这些简单的演示如何说明不同指标之间的关系，如客户获取成本或终身价值。堆叠条形图也可以显示这种类型的比较。WordPress 在插件目录中使用这种方法来显示用户安装的插件版本：
WordPress 插件目录使用堆叠条形图来显示用户下载的版本。
如果企业想显示其客户群的数据，饼图和甜甜圈图是很好的选择。通常，这些数据会按年龄、地点或其他相关因素进行细分。Elementor 使用炫酷独特的粒子可视化来突出其最大的用户群：
粒子效果也可用于数据可视化。Elementor 用它来显示与用户群相关的信息。
在其他情况下，你可以选择展示公司的里程碑或项目进展。Flourish 使用时间轴来展示其历史，这可能会对品牌忠诚度产生影响：
Flourish 网站使用极具吸引力的时间轴来展示其历史。
事实上，电子商务与一般商业应用并行不悖，因此这里的一切也适用于商店。即便如此，该行业也有一些具体的数据可视化方法。
电子商务指标
购买决策往往需要几秒钟的深思熟虑，因此快速向客户提供正确的信息至关重要。使用条形图或雷达图进行产品比较有助于比较不同产品的功能或规格，但这仅仅是个开始。
例如，SRFACE 使用交互式风格指南来解释其潜水衣的规格，并直观展示每种款式的外观：
交互式风格指南能给潜在客户带来更身临其境的体验，因此对电子商务商店大有裨益。
这与商业应用很接近，但你也可以使用图表和图形来帮助访客了解产品采用的趋势。WordPress Theme Directory 就使用了条形图：
WordPress 主题目录包括一个柱形图，显示每个主题在一段时间内的下载数据。
您可以在任何需要使用文字的地方安装图形小工具。例如，许多电子商务商店使用简单的对比文字来计算库存。不过，进度条可能更适合这里，因为它还可以增加销售的紧迫性。
实时指标跟踪
实时可视化给人一种激动人心的感觉，因为你可以看到跟踪指标的实时进展。慈善机构和非营利组织经常使用这类图形小工具。
GoFundMe 是全球最大的众筹平台，每个筹款人都会得到一个温度计或进度跟踪条，当目标接近时，它就会填满：
流行的众筹平台 GoFundMe 使用进度条和温度计可视化来显示筹款工作离完成的距离。
动画计数器或信息图表有助于展示产品和服务的实时影响。例如，WordPress.org 主网站有一个专门的页面来显示核心平台的下载量，该页面每分钟更新一次：
WordPress.org 的下载计数器每分钟都会更新当前的总下载量。
比如服务器提供商使用统计图表来帮助您监控网站在不同服务中的正常运行时间：
状态页面提供了一个统计图表，显示任何长时间的停机情况。
这种实时更新策略除了炫耀和炫耀之外，还有其他实际用途。在某些情况下，您需要了解某些指标的最新情况。
内部分析
绩效监控的范围很广。它可以是一线的 KPI 衡量策略，也可以是对特定指标的个性化概述。Google Analytics 就是一个很好的例子，它以引人入胜的方式展示了丰富的利基网站数据：
谷歌分析将许多不同的数据可视化类型压缩到一个页面上。
Google Lighthouse 审计应用程序 DeploymentHawk 使用大量不同的图表、图形、计数器等来计算数字并将报告结果可视化：
DeploymentHawk 应用程序采用 Google Lighthouse 数据，并使用自定义图表、图形和计数器进行展示。
应用程序性能监控 (APM) 工具也能做到这一点，可根据您需要查看的指标使用多种不同的数据可视化类型：
根据网站数据显示各种图表。
如果您有需要完成的目标，游戏化总是能帮上忙。Todoist 使用基本的条形图和折线图以及因果关系积分系统来实现这一点：
Todoist 应用程序利用游戏化技术确保您以最高效率完成任务。
最后，一些非营利组织会公布内部调查结果。这在面向公众的展示和将数据作为内部晴雨表之间形成了一种独特的对立。例如，盖茨基金会将其内部理念和愿景应用于未来，进而创造了预测性统计的绝佳范例：
盖茨基金会使用独特的条形图来帮助推动其理念和行动。
有了可视化类型和应用的这种灵活性，你还可以利用图形工具的适应性。本篇文章的其余部分将向您展示如何在 WordPress 中实现这一点。
帮助您显示 WordPress 图形小工具的插件
当然，要为 WordPress 实现图形小工具，您需要使用插件。在接下来的几节中，我们将介绍一些最佳选择，排名不分先后。
1. Visualizer：图表图形
ThemeIsle 的 Visualizer 是免费图形小工具插件的可靠选择。它与其他主题和插件一样，支持多种图表类型，而且使用简单。
来自 WordPress.org 的 Visualizer 插件头图。
它提供四种不同的图表类型、一个类似电子表格界面的数据编辑器和大量自定义选项。该插件还集成了谷歌图表（以及其他谷歌 API）。不过，虽然该插件功能齐全，但要访问更多图表和编辑类型，您需要付费购买高级版本（每年 199 美元）。
不过，免费版可以满足大多数用户的需求，尤其是基本但华丽的数据可视化。
2. Data Tables Generator by Supsystic
乍一看，Data Tables Generator 似乎并不适合这份 WordPress 图形小工具插件列表。毕竟，顾名思义，它只能创建文本数据表。免费版确实如此，但高级版包含更多功能，包括图表和图形。
Data Tables Generator 插件头图 via WordPress.org
好消息是，你的作品开箱即用，看起来非常棒。您可以使用各种可视化选项，如柱状图、折线图、甜甜圈图、气泡图等。我们还认为排序和过滤选项在该领域处于领先地位。
这意味着该插件非常适合需要高度交互性的网站，尤其是还需要数据表和更多可视化数据表示的网站。
尽管如此，免费版中并没有图表或图形。不过，Data Tables Generator 的终身许可证价格为 89 美元，就其功能而言，还是非常划算的。
3. amCharts：图表和地图
amCharts 插件的独特之处在于，它连接到外部内容交付网络（CDN）来交付其库。因此，该插件只帮助您将 JavaScript 库连接到 WordPress，而不是直接创建图表。
来自 WordPress.org 的 amCharts 头图。
amCharts 的功能非常广泛，而且可以进行高度定制。不过，您需要使用 amCharts 界面来创建图形工具，这意味着需要在两个平台之间切换。
如果您需要多种图表类型，并且乐于使用第三方界面，amCharts 可能会适合您。不过，amCharts 没有访问图表或图形的免费层级，因此您需要每年 80 美元起的高级许可证。
4. Graphina – Elementor 图表和图形
如果你使用 Elementor，那么你已经在页面生成器中拥有了一些图形工具选项。不过，Graphina 提供了大量高质量的图表、图形和其他可视化类型。
来自 WordPress.org 的 Graphina 头图。
在免费图形小工具插件中，该插件拥有最多的图表类型和设计，并与 Elementor 和 Divi 深度集成。您还可以在任何插件中获得一些最全面的自定义选项，更不用说免费插件了。
看似不可思议，但高级版的功能却进一步增强，使 Graphina 成为 WordPress 上最深入的图形小工具插件。当然，你需要使用 Elementor（或 Divi）来利用这些功能，这可能是一个障碍。不过，49 美元的价格可能值得你转用这些流行的页面构建工具之一。
5. wpDataTables
与 Data Tables Generator 相似，wpDataTables并不以图表和图形为主。不过，你可以使用该插件来制作图表和图形，而且效果很好。需要处理大型复杂数据集的网站不妨试试这款插件。
来自 WordPress.org 的 wpDataTables 头图。
正如你所期望的，这里有更多创建表格的选项，而且还集成了 Google Charts 和 Charts.js，为你提供 15 种不同的可视化类型。它擅长处理大型数据集，源导入选项也非常出色。如果你有开发经验，你可以从 Excel、XML、CSV 文件、JSON 甚至 PHP 数组中导入数据。
不过，由于 wpDataTables 主要侧重于图表，因此使用它制作图表并不那么简单。这种学习曲线，再加上隐藏在高级版（每年 39 美元起）背后的大量功能，可能会让你另寻他处。
6. Ninja Charts
我们列表中的最后一个插件是完全免费的，没有高级定价层。如果你是数据可视化方面的新手，Ninja Charts 可能是合适的解决方案，但它提供的功能可以与最好的插件相媲美。
来自 WordPress.org 的 Ninja Charts 头图。
它提供了多种图表类型供您选择，并能根据您的需要进行自定义。它的界面简单明了，并与同一开发商的另一款插件 Ninja Tables 深度集成。
即便如此，它也有局限性。其他用户抱怨缺乏数据聚合等基本功能。尽管如此，它的价格还是无可挑剔的，而且我们仍然相信它能满足许多不同网站的需求。
如何使用 Visualizer 插件为 WordPress 添加图形小工具
让我们快速浏览一下在 WordPress 网站上添加图形小工具的过程。我们将使用 Visualizer，因为我们非常喜欢它，将其作为我们的最爱。
不过，这并不是 Visualizer 教程。因此，我们在这里采取的步骤可能与你选择的解决方案不同。有鉴于此，请安装并激活您选择的插件，然后创建一个新的图表或图形。
在 Visualizer 中，我们在安装时就能获得该选项：
Visualizer 插件的启动向导。
最有可能的是，在插件管理面板的某处会有一个 Add New Chart 按钮：
在 WordPress 中使用 Visualizer 插件添加新图表。
点击按钮并选择图表类型后，就需要输入数据了。免费版的 Visualizer 只支持手动编辑，但你的插件可以提供各种工具的集成和导入选项：
在 Visualizer 插件中编辑图表的数据集。
接下来，查看可供您使用的自定义选项。Visualizer 在图表创建界面中提供了这些选项。你可以对各种方面进行设置，如标题位置、坐标轴标签、网格线、图表大小和位置等等：
在 Visualizer 中进行自定义设计
最后一步是在网站上嵌入图表。许多插件都使用简码来实现这一点，这意味着你只需简单复制并粘贴到所需的帖子或页面即可：
Visualizer 图表的简码。
Visualizer 还为此提供了一个区块，既方便又符合现代 WordPress 的设计。
显示图形小工具的典型做法
在展示图表和图形时，必须考虑几个方面。一言以蔽之，要把它们当作重要而有影响力的内容来对待，并限制显示 widget 的数量。要想更深入地了解，请考虑以下几点：
- 位置。您的小工具应该与内容流自然契合，就像您的图片和视频一样。图形 widget 通常介于媒体和内容之间。
- 加载速度。添加小工具后，请务必监控网站性能。有些工具会影响网站性能。
- 可访问性。虽然您提供的是可视化数据，但应确保包含适当的alt文本，并可通过键盘导航。这可以帮助所有用户访问您的小工具，无论其视力如何。
说到性能，这是需要注意的问题。有很多方面会影响网站的速度，考虑到附加图形的负载，这也是合情合理的。我们的建议是尽可能使用 SVG。对于简单的图表和图标来说，它们比光栅图像性能更高，可扩展性更好。
懒加载和缓存在这方面也有帮助，因为两者都以不同的方式限制图表的加载。如果选择从外部来源获取数据，请确保选择高效的连接，以尽量减少HTTP 请求的数量。最好、最理想的方法是将数据托管在网站服务器上，不过这可能不是你能控制的。
小结
WordPress 的图形窗口小工具允许您将网站上的典型文本数据可视化。这种数据展示和可视化方法可以将复杂的信息转化为更易于理解的格式。您可以使用图表、图形、交互式地图等来显示这些数据。
合适的插件至关重要，我们将在本篇文章中详细介绍。Visualizer 和 Graphina 都是不错的选择。不过，正确的工具取决于你自己的需求。毫无疑问，它能对你的网站及其参与度产生巨大的积极影响。
WordPress 图形小工具对您来说足够重要吗？我们很乐意在下面的评论区听听您的想法！
评论留言