WordPress中響應敏感的實時圖：插件和繪圖

態

鑰匙要點

• > FLOT庫是在WordPress網站內創建響應式實時圖形的有效工具。在所有設備上都可以實現並運行。
>
• >俯臥撑跟踪器表單和數據庫表可用於填充圖中的數據。此系統到位後，可以創建任何類型的圖形數據。
> WordPress插件的輪流可用於在WordPress中註冊並運行FLOT庫。但是，也可以在沒有插件的情況下實現庫。
• >
創建響應迅速的實時圖涉及多個步驟，包括獲取FLOT庫，進行俯臥撑結果和創建圖形。重要的是要了解flot如何解釋數據而不僅依靠複製和粘貼代碼。
• >

在我們有關在WordPress網站中創建響應迅速的實時圖表的系列文章的這一部分中，我們將最終獲得好東西！最後三個部分是為了讓新設計師提高速度。如果您只是到達，跳過了太快，或者公然感到困惑，請回到早期的部分並查看一點。某些代碼對該項目非常具體，例如使我們的圖庫工作所需的UNIX時間戳。 我一直在構建一個簡單的俯臥撑跟踪器表單和數據庫表，用於使用我們的Flot圖。當然，您幾乎可以使用任何數據源來填充頁面中的數據。但是，為了教授新手如何開始使用表格和phpmyadmin，我想從頭開始整個過程​​。 在WordPress網站中將此系統安裝到位後，您可以從字面上創建任何類型的圖形數據。 FLOT圖庫是廣泛的，非常易於實現。正如我將能夠演示的那樣，您可以用我們的Puspups Tracker沖洗和重複，並創建一個強大的系統來顯示此數據 - 全部在響應式網站中實時實時。

>步驟1：獲取FLOT庫

> 我將FLOT用於圖形，原因很多，但主要是因為它易於實現，並且我能夠使其能夠在每個可想像的設備上使用。它使用HTML5中的Canvas功能來繪製數據，並能夠製作出一些瘋狂的東西。您可以使用任何想要的東西。但是，對於本教程，我們將使用FLOT。 具體來說，我們正在使用我的插件（WordPress的FLOT）正確註冊並在WordPress中運行FLOT庫。我強烈建議使用該插件，但是您可以在沒有該插件的情況下實現FLOT。 WordPress插件的FLOT

>步驟2：使俯臥撑結果發布

在WordPress中，轉到“ post” s>“添加新”，然後創建一個標題為“俯臥撑結果”的帖子。在身體中，放置以下快捷代碼：

[pushups_results_sc]

發布帖子，您完成了。目前，帖子內容將顯示精確的文本“ [Puspups_results_sc]”，因為我們實際上還沒有為短代碼創建功能。

>步驟3：創建我們的圖形

在本系列的第2部分中，我們在WordPress數據庫中創建了一個名為Puspups的新表。我們使用它來存儲我們表格中的俯臥撑信息。如果您對PhpMyAdmin真的很滿意，請轉到SQL選項卡並運行此查詢以創建我們將使用的表： [sourcecode語言=“ sql”] 創建表`{您的數據庫}``。 `puspups_id` int（10）不是null auto_increment， `puspups_count` int（3）不為空， `puspups_date` varchar（15）不為空， `puspups_wpuser` varchar（100）不為空， `active` int（2）而不是默認為'1'， 索引（'Puspups_id`） ）發動機= myisam [/原始碼] 到目前為止，一切都涉及到建立基礎架構，以便您可以開始提取數據並以很棒的方式顯示數據。從這裡開始，一切都與圖形有關！ 創建一個新的PHP文件，並將其稱為Puspups_results.php。粘貼以下代碼後，您將將其上傳到WP-CONTENT/插件/flot-for-wp/flot文件夾： [sourcecode語言=“ php”] user_login; //大測試！如果沒有登錄用戶，他們將一無所獲！ 如果（！is_user_logged_in（）） { echo‘登錄查看俯臥撑結果！

register 如果您還沒有。

’; } 別的 { //查詢 $ sql = mysql_query（“從俯臥撑中進行選擇* puspups`.`.pushups_wpuser` ='$ wpuser'='$ wpuser'和'puspups`.'Active` = 1訂單pussups`.pushups`.pushups_date asc asc' '）; /* 最小和最大查詢。通常不必必須生產 我們自己的最小和最大數字用於FLOT，我們下面的過程創建了一個數據 設置以逗號結束的結尾，該逗號將其解釋為零。 */ $ min = mysql_query（“從俯臥撑訂單中選擇Puspups_count，按Puspups_count ASC限制1”）; $ max = mysql_query（“從俯臥撑訂單中選擇Puspups_count，按Puspups_count desc limit 1”）; //我們需要計算圖表上的最小點 while（$ row = mysql_fetch_array（$ min）） { $ min_count = $ row ['Puspups_count’]; } $ min_count = $ min_count * .9; //這為我們提供了圖表上的一些呼吸空間 //讓我們計算圖表上的最大點 while（$ row = mysql_fetch_array（$ max）） { $ max_count = $ row ['Puspups_count’]; }$ max_count = $ max_count * 1.1; //這也為我們提供了圖表上的一些呼吸空間 /* 現在，我們將JavaScript和HTML生成頁面上。 這不是我最喜歡做的方式，但是可以完成工作。 */ echo'

’; //在layout.css文件中自定義WP安裝的寬度和高度 迴聲'

俯臥撑結果'。 $ wpuser。 ‘

’; echo‘

‘; 迴聲’ jQuery（document）.ready（function（$）{ var d1 = [ {標籤：“俯臥撑跟踪器。 $ wpuser。 ‘”， 數據： ['; while（$ row = mysql_fetch_array（$ sql）） { echo’[。 $ row ['Puspups_date']。 ‘，’。 ‘]，’，’ } 迴聲’]]}; var佔位符= $（“＃佔位符”）; var plot = $。 .plot（佔位符，D1， { xaxis： {模式：“時間”}， 點： {show：true，符號：“ circle”}， 線： {show：true}， 傳奇： {show：false}， Yaxis： {min：’。 $ min_count。 ‘，最大：‘。 $ max_count。 ’} }）; }）;

’; } }//俯臥撑結果中的短代碼發布 add_shortCode（'Puspups_results_sc'，'Puspups_results'）; mysql_close（）; ？ > [/原始碼] 我知道這是一噸信息，我盡力添加評論。再一次，該文件稱為Puspups_results.php，輸入WP-Content/插件/flot-for-wp/flot文件夾中。很抱歉在這裡壓縮代碼的外觀，但是如果您下載了我的資源文件，則可以以更有條理的格式看到內容。

recap

雖然這是很多代碼，但請花點時間查看評論。發生了很多事情，如果您不跟踪Flot如何解釋數據，那麼您將使用自己的數據努力。 在這篇文章中，我們解決了一些非常密集的過程。我試圖通過讓您複製和粘貼來使您輕鬆，但不要懶惰！您不能只添加此插件並獲得神奇的圖形。因此，請花一些時間查看此代碼。 作為快速回顧，在我們介紹的系列的這一部分中：

• >抓住flot插件（對於剛跳入系列的人們）
>
• 創建一個帖子以顯示結果
• >將flot代碼添加到拉動我們的數據並正確顯示的頁面。
信不信由你，您實際上主要完成了！如果您刷新俯臥撑結果頁面，則應該看到圖形！ 在本系列的下一部分中，我將討論有關如何與PHP和MySQL一起使用FLOT的一些非常詳細的討論。 在最後一部分中，我討論瞭如何樣式的圖形。因此，如果您是開發人員並立即使圖表工作，則可能需要跳到本系列的後期部分。

>關於wordpress插件中響應式實時圖形的常見問題和繪製

>

>如何選擇最佳的WordPress插件來創建響應式實時圖表？

選擇用於創建響應式實時圖形的最佳WordPress插件取決於您的特定需求和所需的功能。要考慮的一些因素包括插件支持的圖形和圖表的類型，其易用性，自定義選項以及它是否支持實時數據更新。您還應該考慮插件的評論和評分，以及它與您的WordPress版本的兼容性。

>

我可以使用這些插件自定義圖形和圖表的外觀嗎？用於創建圖形和圖表的WordPress插件提供了一系列自定義選項。您通常可以更改圖形的顏色，字體和尺寸。某些插件還允許您在圖表中添加標籤，傳奇和工具提示以獲得更好的數據表示。

>如何使用實時數據更新圖形？

>可以根據所使用的插件來通過各種方法來更新圖形。一些插件提供內置的實時數據更新功能，而另一些插件可能需要您手動更新數據或使用其他工具或服務。始終請參考插件的文檔或有關特定說明的支持。

>是否有任何免費的WordPress插件來創建響應式實時圖表？

是的，有幾個免費的WordPress插件可用於創建響應式響應實時圖。但是，請記住，免費插件在功能和支持方面可能有限制。如果您需要高級功能或專用支持，則可能需要考慮高級插件。

>

>如何將圖形添加到我的WordPress帖子或頁面？

>頁面通常很簡單。大多數插件都提供可以將其插入帖子或頁面中的短代碼或塊。然後，您可以在插件接口中配置圖形設置和數據。

>

>我可以使用這些插件從我的WordPress post或page Data創建圖形嗎？

>某些WordPress插件允許您從您的WordPress發布或頁面數據。這對於可視化網站的分析（例如頁面視圖或訪問者人口統計）可能很有用。始終檢查插件的功能和文檔，以查看是否支持此功能。

>

這些插件是否支持交互式圖形？

>許多用於創建圖形的WordPress插件都支持Interactivity。這意味著用戶可以懸停在數據點上，以查看更多信息，放大和縮小，甚至單擊數據點以導航到其他頁面。但是，插件之間的交互性級別可能會有所不同，因此在選擇插件時檢查此功能很重要。

我可以用這些插件導出或打印我的圖表嗎？

創建圖形允許您導出或打印圖形。如果您需要將圖形包括在報告或演示文稿中，這可能很有用。導出格式可能會有所不同，但通常包括PNG，JPEG，PDF和SVG。具有流行的頁面建築商，例如Elementor和Gutenberg。這使您可以輕鬆地在頁面構建器接口中添加和自定義圖形。但是，兼容性在插件之間可能會有所不同，因此在選擇插件之前先檢查一下很重要。

>

我是否需要任何編碼技能來使用這些插件？

>大多數用於創建圖形的WordPress插件都設計為用戶友好，不需要任何編碼技能。他們通常提供一個視覺界面，您可以在其中輸入數據並自定義圖形。但是，某些插件可能會提供需要基本HTML或CSS知識的其他功能或自定義選項。

>

以上是WordPress中響應敏感的實時圖：插件和繪圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！