態
鑰匙要點
- > 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中文網其他相關文章！
