WordPress 和数据可视化

已发表: 2022-02-04

您是否有大量数据要以图形格式显示在 WordPress 网站上？ 也许一些销售统计数据或数据可以向客户展示您在几个月内如何提高了他们网站的访问量？ 不管是什么原因，以可视化的方式呈现数据可以更轻松地与您的观众交流核心观点，并且更有趣……毕竟，除非您是一个真正的数字极客，仔细研究一排排数字的电子表格是没有人的想法很有趣！

您可能喜欢以视觉方式呈现数据的想法，但关键问题是“您是如何做到的？”。 在某些图形设计软件（如 Canva）中创建图表或饼图，然后将图像放在您的网站上可能很诱人。 这肯定会完成工作，但如果有更好的方法呢？

幸运的是，有，而且，作为 WordPress，一切都从一个插件开始！ 在本文中，我们将介绍一些可用的插件选项，以帮助您以用户友好、有趣和易读的方式显示这些数据。 我们走吧！

简易图表

Easy 图表插件是一个流行的免费插件，可以完成工作。 它已经有一段时间没有更新了，但这似乎更多是因为它继续“按原样”正常工作，而不是由于任何重大疏忽。

它功能齐全，入门非常简单。 安装后，直接从 Easy Charts Admin 区域内的“Add New”菜单链接。

您会看到可以在行和列中添加数据（就像在 Excel 或其他电子表格中一样。作为奖励，您可以使用预览面板即时查看结果。

配置很详细。 您可以个性化样式、排版、标题、颜色等，以实现您想要的外观。 可以通过多种方式呈现您的数据……您选择的方式在很大程度上取决于您呈现的数据类型。

  • 条形图
  • 面积图
  • 堆积条形图
  • 堆积面积图
  • 百分比条形图
  • 百分比面积图
  • 饼形图
  • 甜甜圈图
  • 加强条形图
  • 瀑布图
  • 折线图
  • 极地区域图

创建图表后，您将获得一个短代码，然后您可以将其粘贴到帖子或页面中。 或者，如果您正在使用可视化编辑器，您可以借助快速插入“简易图表”按钮直接从内部添加图表。

该插件是使用 uvCharts Javascript 库开发的，并使用 SVG 和 CSS3 过渡创建图表。 作为一个很酷的奖励，您还可以将您创建的任何图表下载为图像文件。 最后，您还会注意到图表是响应式的……在当今移动优先的网页设计世界中是必须的。

展示台

Visualizer 插件是为您的网站创建美观、响应迅速的图表和图表的另一种流行选择。 拥有超过 40,000 次安装和大量好评，这是一个绝佳的选择。

安装并激活插件后，您应该会在 WordPress 菜单中看到它的列表。 单击“Visualizer -> 添加新图表”以添加您的第一个图表。

将出现一个弹出窗口，引导您完成选择最适合您的特定图表要求的选项的过程。

您有 6 个免费模板可供选择：

  • 桌子
  • 馅饼/甜甜圈
  • 线
  • 区域
  • 地理
  • 酒吧

您可以在本地上传数据 CSV 或从远程 CSV 文件或 Google 电子表格导入数据。 您可能需要先下载模板 CSV 文件，但要检查您的数据是否以插件能够理解的方式构建。 或者，您可以从远程 JSON 源导入数据或手动添加数据。

在“设置”选项卡中，您会找到一系列选项，允许您在发布图表之前更改图表的样式。

创建图表后，您可以复制其关联的短代码或将其导出为 CSV 或图像。 Visualizer 插件使用 Google Visualization API、DataTables.net 和 ChartJS 来完成上述工作。

wpDataTables

wpDataTables 插件是创建数据表和图表以显示在 WordPress 网站上的另一个绝佳选择。 它是一个高级插件，但确实提供了一个轻量级的免费版本，可以为许多项目提供足够的功能。

安装并激活后，前往“wpDatatables -> Create a Chart”开始。

您可以使用向导并按照步骤创建您选择的图表。 为图表设置名称，选择渲染引擎和可视化类型，然后获取必须是使用相同插件创建的表的源数据。

让我们更详细地看一下这个过程，以检查前面提到的插件未提供的功能。 单击“创建表”开始。

如您所见，您可以从头开始创建它，也可以从现有源中提取表内容。 对于此示例，我们将选择从现有源创建。 单击此按钮后，我们将被要求选择“输入数据源类型”。

在免费版本中，我们可以使用 CSV、Excel、XML 或 JSON 文件格式或提供 PHP 序列化对象。

使用 Pressidium 托管您的网站

60 天退款保证

查看我们的计划

这是一个很棒的功能，因为它提供了从数据库中呈现数据的选择。 这不是最容易做到的，但是嘿，我们准备好迎接挑战了！

在此示例中，假设我们希望查看一些统计信息，以显示针对页面的帖子数量。

输出序列化数组的 PHP 代码应如下所示：

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

根据 wpDataTables 提供的官方文档，父数组条目将被解析为行，子数组键将被解析为列标题，子数组值将被解析为单元格值。

我们将代码保存在名为test.php的文件中，出于本示例的目的，我们将把它放在 WordPress 安装的根文件夹中。

回到管理区域，我们将像这样填写文件路径：

我们保存更改，瞧。

现在我们可以将表格设置为图表的来源，选择图表类型并保存图表。 就那么简单！ 最后的步骤是按照向导得出结论，这将涉及调整可用设置以获得图表所需的设计。 之后，您可以自由发布它。

结论

能够在网站上以可视方式显示数据非常有用。 然而，许多 WordPress 用户根本没有意识到在插件的帮助下这是一件相对容易的事情。 希望以上内容让您对可用的选项有所了解。 快乐的图表构建！