WordPress 的 5 個最佳數據可視化插件

我最近完成了一篇關於 JavaScript 圖表庫的文章，其中一些還專門研究具體的數據可視化功能。 但是，雖然您可以通過 CDN 在您的 WordPress 網站上使用這些庫中的任何一個，但並不能保證它會按照您想要的方式運行。

這主要與 WordPress 生態系統的工作方式有關。 絕對可以使用來自“外部”來源的外部腳本，但有時主題不兼容之類的事情會阻礙。 因此，在本文中，我將仔細研究已構建為 WordPress 插件的數據可視化工具。 這確保了最佳的兼容性和易用性。

對本文中提到的插件有什麼期望？

數據可視化跨越許多不同的類別和類型，因此在本文中，我們將研究兩個不同的數據可視化用例。

• 表格——通過表格界面顯示數據意味著您可以展示大型數據集，並利用分頁、過濾器和搜索等功能。
• 圖表——當您想要顯示較小的數據集同時保留視覺清晰度和良好的演示等元素時，這些類型的圖表是最好的。

最後一件事是插件的成本。 本文的重點是免費使用的插件，即使它們有可用的高級模型（老實說，這些天，每個插件都有）——所以如果你想在你的WordPress 發布，而且是免費的——在我們為此目的探索最流行的插件時繼續閱讀。

1.圖表塊

bPlugins的 Chart Block 插件是一種相對較新的向 WordPress 站點添加圖表的解決方案，但它也是最容易使用的解決方案之一。 我也是他們圖表創建界面的忠實粉絲，因為它易於使用並提供許多自定義選項。

這是一個啟用塊的插件，所以古騰堡是強制性的！

這是使用圖表塊創建的示例圖表：

您可以完全控制數據在購物車中的顯示方式，包括更改顏色、添加數據點以及提供標題/副標題。 還可以在圖表中添加下載按鈕，以便讀者可以在本地將圖表保存為圖像。

您可以使用 Chart Block 創建什麼樣的圖表？

目前，該插件支持折線圖、條形圖、餅圖、雷達圖、甜甜圈圖和極地圖。

安裝圖表塊後，您可以繼續將圖表塊插入您想要顯示圖表的帖子中。 通過這樣做，插件將自動創建一個示例圖表，您可以使用自己的數據、標籤和其他設置對其進行修改。

就以圖表和圖形的形式可視化數據而言，這個插件盡可能高效。

2.忍者桌

Ninja Tables 可讓您將數據轉換為表格演示文稿。 此插件中的每個功能都旨在通過可視化編輯器使用。 因此，您可以實時直觀地構建和預覽您的表格設計。 可以手動添加數據，也可以上傳 CSV/JSON 文件。

這是使用此插件創建的典型數據表的外觀：

這是一個完全交互式的表格。 您的讀者可以根據您提供的過濾器對數據進行排序。 他們還可以搜索，甚至導出表格以保存在他們的 PC 上。 是的，Ninja Tables 有許多不同的主題可供您選擇！ 但是，這不是可視化數據的唯一方法。

安裝插件後，您可以前往Ninja Tables -> Charts啟用和訪問圖表構建界面。 您可以選擇 Chart.js 和 Google Charts 作為渲染引擎，總共有 20 種不同的圖表設計。

選擇圖表類型後，您可以通過指定數據源（手動或從 Ninja Tables 本身）繼續前進，最後格式化圖表，然後獲取簡碼。 獲得短代碼後，可以將其放置在頁面/帖子的任何位置以顯示您創建的圖表。

3. 壓桌機

包含兩個可以以表格格式顯示數據的不同插件的原因是：

• Ninja Tables 還提供圖表功能（TablePress 沒有）。
• 除了一些高級擴展之外，TablePress 大部分是免費的（在某種程度上就像 Ninja Tables 一樣）。

TablePress 使用 DataTables jQuery 庫作為其後端。

並且因為它確實如此，您可以訪問一些非常棒的功能。 這些功能包括實時排序、分頁、自定義過濾器以及根據自己的喜好設置表格樣式的能力。

在完成創建第一個表的初始過程後，您將能夠對其進行自定義，然後指定實際的表內容。 手動執行此操作的另一種方法是導入一個預先存在的文件，該文件包含您要在表中顯示的所有數據。

以下是主要功能的概述：

• 您創建的表格保存為簡碼，允許您在帖子、頁面甚至小部件區域中顯示您的表格。 也可以使用標籤功能將其添加到您的主題中。
• 支持所有內容類型，包括文本、圖像和代碼 (HTML/JavaScript)。
• 複雜數據顯示支持數學公式。
• 從顏色到字體，行和列是完全可設置的。
• 以 JSON、CSV、Excel 或 HTML 格式導入數據。 也支持外部上傳。
• 實時預覽以確保表格按您的預期運行。

關於可視化大型數據集，像 TablePress 這樣的插件極大地簡化了這個過程。

4. PieBuilder

PieBuilder 的獨特之處在於它只能通過短代碼工作。 這意味著您必須自己手動輸入數據​​，包括自己設置每個段的顏色。 這有點額外的工作，但是在測試了插件之後，我發現最終的圖表設計相當不錯。

簡碼本身如下所示：

 [TP_PIEBUILDER_DOUGHNUT title="Chart Title" values="15, 25, 45" labels="Label #1, Label #2, Label #3" colors="#000, #111, #222"]

使用它非常簡單； 這是一個快速的總結：

• 標題- 這是您要應用於圖表的標題。
• 值- 這些是您希望顯示的數據的數值。
• 標籤- 每個數值的標籤，按相對於值的時間順序排列。
• 顏色——這些是圖表中每個數據點的基於十六進制的顏色代碼。

最後要注意的是短代碼名稱，在上面的示例中是“ TP_PIEBUILDER_ DOUGHNUT ”——總共有 5 種不同的圖表類型。

這是它們的完整短代碼列表：

 TP_PIEBUILDER TP_PIEBUILDER_DOUGHNUT TP_PIEBUILDER_POLAR TP_PIEBUILDER_BAR TP_PIEBUILDER_HORIZONTAL_BAR

因此，根據您要顯示的圖表 - 您可以使用簡碼來獲得確切的樣式。

5. 圖表和圖表

如果不適合您使用原始形式的簡碼，Pantherius 的 Charts & Graphs 插件應該是一個不錯的選擇。 這個插件最後會生成一個簡碼，但界面幾乎是 100% 可視化的。 這是可視化構建器的示例：

因此，它與 PieBuilder 非常相似，您必須手動輸入值，並且您還必須自己設置顏色（請查看此處獲取配色方案靈感），但有趣的是，您可以指定多種顏色。 如果你這樣做了，每次圖表都會有一組獨特的。

完成後，您可以單擊“生成”按鈕，將為您製作一個預製的短代碼字符串。 然後還會在該字符串下方生成實時預覽。

 [wpcharts type="piechart" bgcolor="red:gray:yellow,blue:gray:yellow,random:gray:yellow,purple:gray:yellow" min="0" legend="true" titles="Label #1, Label #2, Label #3" values="40, 68, 126"]

使用此插件創建的圖表適合移動設備（響應式）。

數據可視化和圖表插件：總結

如果您要在 WordPress 帖子中添加數據表或圖表，可以使用這些插件。 有其他方法，例如使用第三方服務來創建圖表，但是您必須從外部源將這些圖表嵌入您的站點。 白色本質上並不是一個糟糕的解決方案。 從長遠來看，它可能會限制您控制數據的能力。