php - 在 wordpress 插件中可视化图表
问题描述
我是 php 和 WordPress 的新手。我试图了解如何在基本的 WordPress 插件中显示以 html 和 JavaScript 生成的图形。
这是我希望显示图表的基本管理页面。
<?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>";
}
?>
例如,我将chart.js 用于绘图,其中一个文件用于html,另一个文件用于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'
}
}
});
解决方案
这将是最简单的解决方案,将 Chart.js 排入队列并打印脚本以在菜单 HTML 输出中启动它:
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
}
但我建议以标准方式执行此操作,并有条件地将 Chart.js 和您自己的 JavaScript 文件加载到您的菜单页面,如如何在某些 /wp-admin 页面上将样式/脚本排入队列?
推荐阅读
- python - 如何在 Python MySQL LIKE Query 中输入?
- android - 在非活动类中使用来自 SharedPreference Helper 类的 getter
- python - 在网状结构中找不到 sklearn (LocalOutlierFactor) 的私有函数
- caching - Go 中的 RWMutex 未按预期工作
- powershell - PowerShell 使用自签名证书连接到 REST API。
- javascript - Twilio - 如果最终用户结束通话,则无法捕捉
- .net-core - .net core 项目如何知道构建时要包含哪些文件
- java - 如何使用页面对象模型(Webdriver + Java + JUnit)断言“选择”列表具有值或可见文本?
- javascript - CKEDITOR :删除选择并在选择结束时设置光标位置
- ios - 自动填充不起作用 iphone 角度