如何建立漂亮的WordPress圖形圖表

無論您是編制地方選舉資料的研究人員，還是與班級分享當地野生動物種群資料的教師，沒有比圖表更好的替代品了。這些視覺化工具將無聊、看似毫無價值的資料轉化為易於消化的資訊。

很棒的是，您不必擔心處理複雜的圖形構建軟體，因為WordPress圖形和圖表可以使用簡單的外掛製作。因此，我們在這裡概述哪些外掛是最好的，我們還將介紹如何建立漂亮的WordPress圖表和圖形。

1. 在WordPress中製作圖表和圖形的優勢
2. 5個有效的WordPress圖表和圖表外掛
3. 如何建立漂亮的WordPress圖表和圖形

在WordPress中製作圖表和圖形的優勢

您可能想知道為什麼不能簡單地在Excel中開發圖形或圖表，然後將其截圖以將其放置在您的部落格文章中。有時這種方法效果很好，但有時它是一種巨大的浪費。使用Excel或其他圖表構建程式的主要原因是當您需要WordPress外掛無法提供的高階功能時。

否則，以下是使用外掛製作WordPress圖表和圖形的好處：

1. 它將您的所有圖形構建整合到一個區域中。如果您定期製作圖形或圖表，則可以節省大量時間。
2. 如果需要，它允許您返回並編輯圖形。圖片限制了快速修復，並要求您找到用於製作圖表的舊檔案。
3. 一些圖表和圖形具有互動功能，這是圖片永遠不可能做到的。

總體而言，WordPress圖表外掛簡化了流程，但它仍然為您提供了部落格文章所需的大部分功能。

5個有效的WordPress圖表和圖表外掛

在我們開始學習如何建立漂亮的WordPress圖表和圖形的教程之前，我們想了解一下最好的外掛來完成你所需要的。

1. wpDataTables
2. WordPress Charts and Graphs Lite
3. WordPress Charts
4. Interactive Maps, Charts, Graphs
5. UberChart

1. wpDataTables

wpDataTables是一個非常強大的WordPress外掛！不要讓這個名字欺騙你。它可以做的不僅僅是建立典型的表格。您也可以設計各種圖表和圖形。它是專門為允許您輸入大量資料而開發的，並快速將其轉換為精美的圖形顯示給您的讀者。

WordPress外掛wpdatatables

wpDataTables是一個高階外掛，許可證起價為44美元。它的一些功能包括：

• 一切都是響應式的，這意味著它們將為每臺裝置完美地擴充套件
• wpDataTables外掛具有三種不同的圖表渲染引擎：Google Charts、Highcharts和Chart.js。這使您可以使用許多可自定義的選項來呈現簡單而靈活的圖表
• 表格和圖表的實時自動重新整理
• 在後端預覽您的圖表以及表格

2. WordPress Charts and Graphs Lite

如果您想使用漂亮的圖表和圖形在您的WordPress部落格上顯示資料和資訊，那麼優秀的WordPress Charts and Graphs Lite 外掛就是您的最佳選擇。它在建立漂亮的互動式視覺效果方面做得非常出色，同時讓您可以完全自由地自定義輸出以使其符合您的確切要求：您可以更改顏色、自定義字型、隱藏文字、新增文字——即使在圖表釋出之後，所有這一切. 在您的文章和頁面中顯示圖表就像上傳電子表格並將外掛自動生成的簡碼新增到您的頁面一樣簡單。

稍後，如果您決定要將圖表的型別從方塊圖更改為餅圖，只需點選編輯按鈕並進行切換。是的，真的就這麼簡單。還值得一提的是，它生成的圖表和圖形適用於各種尺寸的所有裝置螢幕（桌上型電腦、平板電腦、手機），因為該外掛具有響應性。

WordPress Charts and Graphs Lite

它包括九種圖表型別、簡碼支援以及使用CSV匯入大量資料的選項。這個圖表外掛也被稱為Visualizer外掛，所以你可能會看到它被稱為那個。有免費版和專業版。專業版至少需要74美元（一個站點許可證），它提供了從其他圖表匯入的工具。其他一些專業功能包括：

• 為使用者提供編輯功能的選項
• 私人圖表建立
• 與您的線上檔案自動同步
• 其他圖表型別
• 您可以訪問實時編輯器

Lite外掛仍然非常強大。以下是您可以製作的一些圖表：

• 折線圖
• 餅形圖
• 條形圖
• 柱形圖
• 面積圖
• 地理圖
• 表格圖表
• 量表
• 燭臺圖
• 組合圖
• 散點圖
• 時間線圖

3. WordPress Charts

WordPress Charts外掛將是我的第三選擇，許多使用者喜歡它簡潔的設計、動畫和色彩豐富的選項。但是，還要注意它已經有一段時間沒有更新了。

WordPress Charts外掛

WordPress Charts外掛提供了六個獨特的圖表和圖形模板，您可以調整和插入自己的資料以顯示在您的網站上。提供的圖表包括：

• 線
• 酒吧
• 餡餅
• 雷達
• 極地
• 甜甜圈型別

所有這些圖表都是使用HTML5構建的。自定義選項幾乎無窮無盡，但您必須瞭解一些關於編碼、短程式碼或至少調整預設設定的知識。我們非常喜歡這個WordPress圖表外掛的原因是它非常輕量級。您可以在所有部落格文章中插入數十個圖表而不會出現問題。這就是使用HTML5的全部意義所在。您可以在不犧牲任何功能的情況下消除混亂。

4. Interactive Maps, Charts, Graphs – For VC

如果您目前在您的網站上有Visual Composer外掛，那麼Interactive Maps, Charts, Graphs – For VC外掛可能適合您。它是Visual Composer的一個附加元件，因此沒有理由不使用它。

Interactive Maps, Charts, Graphs – For VC外掛

該附加元件售價12美元，然後提供互動式地圖、圖表和圖形，所有這些都打包到Visual Composer介面中。該外掛附帶向量圖示、Google字型、無限顏色以及用於構建和自定義圖表和圖形的大量其他功能。該外掛具有您的標準圖表和圖形，例如餅圖和折線圖。還有一個獨特的地圖功能可以突出顯示某些區域，無論是本地地圖還是世界地圖。

5. UberChart – WordPress Chart Plugin

UberChart是一個更通用的高階圖表外掛，因為它不需要Visual Composer外掛。該外掛提供了10種內建圖表型別，每個圖表您會收到大約240個可自定義的選項。

UberChart – WordPress Chart Plugin

您可以通過單擊按鈕匯出和匯入資料，響應式設計可確保您的所有圖表都顯示在每臺裝置上。一些圖表型別包括：

• 折線圖
• 面積圖
• 條形圖
• 餅狀圖
• 甜甜圈圖
• 氣泡圖

這個WordPress圖表外掛最令人印象深刻的部分是電子表格編輯器。它允許您從任何您想要的程式（如Excel）複製資料，將Excel的更高階功能和圖表外掛的多功能性結合在一起。

如何建立漂亮的WordPress圖表和圖形

我們最喜歡的圖表外掛之一是WordPress Charts and Graphs Lite。因此，我們將僅使用該外掛完成本教程。其他圖表外掛具有類似的工具，但介面不同。所以，我建議對它們進行測試，看看哪一個適合你，因為wpDataTables也非常健壯！

第 1 步：安裝並啟用WordPress Charts and Graphs Lite外掛

很簡單。

第 2 步：轉到Visualizer Library並新增新圖表

正如我們上面簡要提到的，WordPress Charts and Graphs Lite外掛也稱為Visualizer。找到設定頁面有些困難，但您所要做的就是轉到媒體 > 視覺化工具庫。在開始使用WordPress圖表之前，您無需配置任何其他設定。

Visualizer Library

登陸Visualizer Library後，您會看到一條訊息“No charts found”。這完全沒問題，因為我們還沒有製作任何圖表。因此，您應該單擊頁面頂部的新增新按鈕。

新增新圖表

這顯示了您可以使用該外掛製作的所有WordPress圖表和圖形。例如，它有餅圖、折線圖、面積圖、地理圖和條形圖。免費版提供了九個WordPress圖表。如果您為專業版付費，您可以獲得另外三個圖表。無論如何，我將為本教程選擇一個餅圖。

圖表和圖形

第 3 步：將資料匯入WordPress圖表

該外掛會自動插入資料，以便您的圖表可以顯示一些內容。但是，為了呈現您自己的資料，您需要使用五種方法之一來匯入它。你可以：

• 從檔案匯入資料（可能是最常用的方法）
• 從URL匯入資料
• 從另一個圖表匯入
• 從WordPress匯入（僅在專業版中可用）
• 手動匯入資料（僅在專業版中可用）

匯入圖表資料

對於此示例，我從CSV檔案匯入資料。它起源於Excel檔案，這是將資料匯入WordPress圖表或圖形的更常見方法之一。從檔案匯入資料時，單擊“Choose File”按鈕，在您的計算機上找到該檔案，然後單擊WordPress儀表盤上的“Import”按鈕。

這應該會向您顯示左側資料的預覽。好訊息是您可以隨時返回並調整CSV的格式，然後重試。下一步還有很多定製工具可以讓事情看起來更好一些。

第 4 步：自定義您的WordPress圖表

所有匯入選項下方都有一個小連結，上面寫著“Advanced”。單擊此按鈕以顯示您的自定義設定。有很多選擇可以玩，所以我們不會在這裡一一介紹。

但我們可以從圖表標題開始。我會輸入類似“Where Does Your Time Go?”之類的內容。因為我的圖表概述了人們在一天中花費在某些任務上的時間百分比。我還可以更改標題的字型、字號、顏色和位置。

自定義WordPress圖表

當您瀏覽設定時，您會注意到幾個選項卡，用於常規設定、切片設定、前端操作等。您很可能希望決定圖例的位置，因為這是圖表的重要組成部分。

除此之外，這完全取決於您要製作的圖表型別以及需要顯示的元素。我將假裝這是我的一群學生的WordPress圖表。因此，我想給他們列印和下載資料和圖表的選項。

WordPress圖表設定

為此，請轉到“Frontend Actions”選項卡。這顯示了允許使用者列印和複製資料的覈取方塊。您還可以為他們提供可下載的Excel表格和CSV。完成自定義圖表後，請確保儲存它。

第 5 步：將簡碼複製到頁面或文章中

儲存WordPress圖表或圖形後，導航回Visualizer Library。您將看到圖表列表，您可以根據圖表型別進行篩選。由於我現在只有一張圖表，我可以立即將其視為唯一的選擇。為了在頁面或文章上釋出您的WordPress圖表，您必須複製圖表的簡碼並將其貼上到所需的頁面或文章中。簡碼位於圖表預覽下方（見下面的螢幕截圖）。

WordPress圖表簡碼

複製短程式碼後，請建立頁面或文章，或轉到已釋出的頁面。找到您想要圖表的位置並貼上到短程式碼中。

第 6 步：在前端檢視WordPress圖表

我建議在點選發布按鈕之前預覽您的圖表。這樣你就知道你的使用者會發生什麼，特別是因為WordPress圖表和圖形可能相當挑剔。如果您看一下下面的螢幕截圖，您會在網站的前端看到我的測試圖的預覽。列印和下載按鈕是可見的，當您滾動時，WordPress圖表有一些漂亮的動畫，顏色和標題元素看起來不錯。

檢視圖表/圖形

更改會在實時預覽中立即發生，因此您可以檢視它們對圖表的影響，而無需儲存並在新選項卡中檢視頁面。還有一個值得一提的功能，它非常棒。您不僅可以編輯圖表的樣式選項，還可以通過上傳另一個檔案、覆蓋原始檔案以及用新資料替換舊資料來編輯圖表中的資料。

小結

所有WordPress圖表和圖形都有其不同的功能。這些外掛最酷的部分是您擁有世界上所有的靈活性。因此，我鼓勵您花時間測試您的圖表並瞭解每個設定調整的作用。然後，你最終會成為圖表大師，人們會問你怎麼做。如果您對如何建立WordPress圖表和圖形有任何疑問或想法，請在下面的評論中新增一行。