问题描述：

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.

<?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

<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

 // 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>

 ＆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 
例如，我将使用chart.js作为带有html文件的图表，另一个用于JavaScript。</ p> 
  HTML </ strong>  </ p> 
 ＆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> 
  JavaScript </ strong> </ p> 
  //条形图
新图表（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> 
网友观点：
This would be the simplest solution, enqueuing Chart.js and printing the script to start it inside the menu HTML output:
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?