鑰匙要點

• > FLOT庫是在WordPress網(wǎng)站內(nèi)創(chuàng)建響應式實時圖形的有效工具。在所有設備上都可以實現(xiàn)并運行。
>
• >俯臥撐跟蹤器表單和數(shù)據(jù)庫表可用于填充圖中的數(shù)據(jù)。此系統(tǒng)到位后，可以創(chuàng)建任何類型的圖形數(shù)據(jù)。
> WordPress插件的輪流可用于在WordPress中注冊并運行FLOT庫。但是，也可以在沒有插件的情況下實現(xiàn)庫。
• >
創(chuàng)建響應迅速的實時圖涉及多個步驟，包括獲取FLOT庫，進行俯臥撐結(jié)果和創(chuàng)建圖形。重要的是要了解flot如何解釋數(shù)據(jù)而不僅依靠復制和粘貼代碼。
• >

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

>步驟1：獲取FLOT庫

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

>步驟2：使俯臥撐結(jié)果發(fā)布

在WordPress中，轉(zhuǎn)到“ post” s>“添加新”，然后創(chuàng)建一個標題為“俯臥撐結(jié)果”的帖子。在身體中，放置以下快捷代碼：

[pushups_results_sc]

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

>步驟3：創(chuàng)建我們的圖形

在本系列的第2部分中，我們在WordPress數(shù)據(jù)庫中創(chuàng)建了一個名為Puspups的新表。我們使用它來存儲我們表格中的俯臥撐信息。如果您對PhpMyAdmin真的很滿意，請轉(zhuǎn)到SQL選項卡并運行此查詢以創(chuàng)建我們將使用的表： [sourcecode語言=“ sql”] 創(chuàng)建表`{您的數(shù)據(jù)庫}``。 `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`） ）發(fā)動機= myisam [/源代碼] 到目前為止，一切都涉及到建立基礎架構(gòu)，以便您可以開始提取數(shù)據(jù)并以很棒的方式顯示數(shù)據(jù)。從這里開始，一切都與圖形有關(guān)！ 創(chuàng)建一個新的PHP文件，并將其稱為Puspups_results.php。粘貼以下代碼后，您將將其上傳到WP-CONTENT/插件/flot-for-wp/flot文件夾： [sourcecode語言=“ php”] user_login; //大測試！如果沒有登錄用戶，他們將一無所獲！ 如果（！is_user_logged_in（）） { echo‘登錄查看俯臥撐結(jié)果！

register 如果您還沒有。

’; } 別的 { //查詢 $ sql = mysql_query（“從俯臥撐中進行選擇 * puspups`.`.pushups_wpuser` ='$ wpuser'='$ wpuser'和'puspups`.'Active` = 1訂單pussups`.pushups`.pushups_date asc asc''）; /* 最小和最大查詢。通常不必必須生產(chǎn) 我們自己的最小和最大數(shù)字用于FLOT，我們下面的過程創(chuàng)建了一個數(shù)據(jù) 設置以逗號結(jié)束的結(jié)尾，該逗號將其解釋為零。 */ $ 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; //這也為我們提供了圖表上的一些呼吸空間 /* 現(xiàn)在，我們將JavaScript和HTML生成頁面上。 這不是我最喜歡做的方式，但是可以完成工作。 */ echo'’; } }//俯臥撐結(jié)果中的短代碼發(fā)布 add_shortCode（'Puspups_results_sc'，'Puspups_results'）; mysql_close（）; ？> [/源代碼] 我知道這是一噸信息，我盡力添加評論。再一次，該文件稱為Puspups_results.php，輸入WP-Content/插件/flot-for-wp/flot文件夾中。很抱歉在這里壓縮代碼的外觀，但是如果您下載了我的資源文件，則可以以更有條理的格式看到內(nèi)容。

recap

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

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

>關(guān)于wordpress插件中響應式實時圖形的常見問題和繪制

>

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

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

我可以使用這些插件自定義圖形和圖表的外觀嗎？用于創(chuàng)建圖形和圖表的WordPress插件提供了一系列自定義選項。您通?？梢愿膱D形的顏色，字體和尺寸。某些插件還允許您在圖表中添加標簽，傳奇和工具提示以獲得更好的數(shù)據(jù)表示。

>如何使用實時數(shù)據(jù)更新圖形？

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

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

是的，有幾個免費的WordPress插件可用于創(chuàng)建響應式響應實時圖。但是，請記住，免費插件在功能和支持方面可能有限制。如果您需要高級功能或?qū)Ｓ弥С郑瑒t可能需要考慮高級插件。

>

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

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

>

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

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

>

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

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

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

>

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

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

>

以上是WordPress中響應敏感的實時圖：插件和繪圖的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！