在 wordpress 插件中可视化图表答案

【问题标题】：Visualise a graph in a wordpress plugin在 wordpress 插件中可视化图表
【发布时间】：2019-02-02 20:06:46
【问题描述】：

我是 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'
      }
    }
});

【问题讨论】：

标签： php wordpress

【解决方案1】：

这将是最简单的解决方案，将 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 文件加载到您的菜单页面，如 How do I Enqueue styles/scripts on Certain /wp-admin Pages? 所示

【讨论】：

太棒了！谢谢