在wordpress插件中可視化圖形
問題描述：
I\'m a novice in php and WordPress. I\'m trying to understand how to display a graph generated in html an JavaScript in a basic WordPress plugin.
This is the basic admin page where I would like the graph to be displayed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php /* Plugin Name: Test plugin Description: A test plugin to demonstrate wordpress functionality Author: the author Version: 0.1 */ add_action(\'admin_menu\', \'test_plugin_setup_menu\'); function test_plugin_setup_menu(){ add_menu_page( \'Test Plugin Page\', \'Test Plugin\', \'manage_options\', \'test-plugin\', \'test_init\' ); } function test_init(){ echo \"<h1>Hello World!</h1>\"; } ?> |
For example, I will use chart.js for the plot with a file for the html and another one for the JavaScript.
HTML
|
1 2 3 4 |
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js\"></script> <canvas id=\"bar-chart\" width=\"800\" height=\"450\"></canvas> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Bar chart new Chart(document.getElementById(\"bar-chart\"), { type: \'bar\', data: { labels: [\"Africa\", \"Asia\", \"Europe\", \"Latin America\", \"North America\"], datasets: [ { label: \"Population (millions)\", backgroundColor: [\"#3e95cd\", \"#8e5ea2\",\"#3cba9f\",\"#e8c3b9\",\"#c45850\"], data: [2478,5267,734,784,433] } ] }, options: { legend: { display: false }, title: { display: true, text: \'Predicted world population (millions) in 2050\' } } }); |
圖片轉代碼服務由CSDN問答提供
感謝您的意見，我們儘快改進~
功能建議
我是php和WordPress的新手。 我試圖了解如何在基本的WordPress插件中顯示用html和JavaScript生成的圖形。</ p>
這是我希望圖形顯示的基本管理頁面。 / p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
＆lt;？php / * Plugin名稱：Test plugin Description：用於演示wordpress功能的測試插件 作者：作者 版本：0.1 * / add_action（\'admin_menu\'，\'test_plugin_setup_menu\'）; function test_plugin_setup_menu（）{ add_menu_page（\'Test Plugin Page\'，\'Test Plugin\'，\'manage_options\'，\'test-plugin\'，\'test_init\'）; 函數test_init（）{ echo「＆lt; h1＆gt; Hello World！＆lt; / h1＆gt;」; } ？＆gt; </ code> </ pre> \\ n <p>例如，我將使用chart.js作為帶有html文件的圖表，另一個用於JavaScript。</ p> <p> <strong> HTML </ strong> </ p> <pre> <code>＆lt; script src =「https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js」＆gt; ＆lt; / script＆gt; ＆lt; canvas id =「bar-chart」width =「800」height =「450」＆gt;＆lt; / canvas＆gt; \\ n </ code> </ pre> <p> <strong> JavaScript </ strong> </ p> <pre> <code> //條形圖 新圖表（document.getElementById（ 「條形圖」），{ 類型：\'bar\'， 數據：{ 標籤：[「非洲」，「亞洲」，「歐洲」，「拉丁美洲」，「北美」]，\\ n個數據集：[ { label：「Population（million）」， backgroundColor：[「＃3e95cd」，「＃8e5ea2」，「＃3cba9f」，「＃e8c3b9」，「＃c45850」]，\\ n數據：[2478,5267,734,784,433] } ] }， 選項：{ legend：{display：false}， title：{ display：true， text： \'2050年預測的世界人口（數百萬）\' } } }）; </ code> </ pre> </ div> <h5>網友觀點：</h5> <div> <p>This would be the simplest solution, enqueuing Chart.js and printing the script to start it inside the menu HTML output:</p> <pre><code>add_action(\'admin_menu\', \'test_plugin_setup_menu\'); function test_plugin_setup_menu(){ add_menu_page( \'Test Plugin Page\', \'Test Plugin\', \'manage_options\', \'test-plugin\', \'test_init\' ); } function test_init(){ wp_enqueue_script( \'chart-js\', \'//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js\' ); echo \\\"<h1>Hello World!</h1>\\\"; ?> <canvas id=\\\"bar-chart\\\" width=\\\"800\\\" height=\\\"450\\\"></canvas> <script> window.onload = function(){ new Chart(document.getElementById(\\\"bar-chart\\\"), { type: \'bar\', data: { labels: [\\\"Africa\\\", \\\"Asia\\\", \\\"Europe\\\", \\\"Latin America\\\", \\\"North America\\\"], datasets: [ { label: \\\"Population (millions)\\\", backgroundColor: [\\\"#3e95cd\\\", \\\"#8e5ea2\\\",\\\"#3cba9f\\\",\\\"#e8c3b9\\\",\\\"#c45850\\\"], data: [2478,5267,734,784,433] } ] }, options: { legend: { display: false }, title: { display: true, text: \'Predicted world population (millions) in 2050\' } } }); }; </script> <?php } |
But I\'d suggest doing it on a standard fashion and load Chart.js and your own JavaScript file conditionally to your menu page, as shown at How do I Enqueue styles/scripts on Certain /wp-admin Pages?
由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 在wordpress插件中可視化圖形
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 在wordpress插件中可視化圖形
