在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插件中可视化图形
