基础知识首先你需要注册GoogleJSAPI 剧本否则您将无法访问它。你需要把它挂在admin_enqueue_scripts 在元框中提供。此外，JSAP需要在自定义脚本之前加载，因此需要将其设置为依赖项。示例：

add_action( \'admin_enqueue_scripts\', \'pie_load_scripts\' );
function pie_load_scripts()
{
    wp_enqueue_script(
        \'google-jsapi\',
        \'//www.google.com/jsapi\',
        array(),
        0,
        true
    );
    wp_enqueue_script(
        \'pie-script\',
        plugin_dir_url( __FILE__ ).\'js/3dpiechart.js\',
        array( \'google-jsapi\' ),
        filemtime( plugin_dir_path( __FILE__ ).\'js/3dpiechart.js\' ),
        true
    );
    wp_localize_script(
        \'pie-script\',
        \'pie_script_vars\',
        array(
            \'meta\' => get_post_custom( get_the_ID() ),
        )
    );
}

注意：避免http(s): 方案允许远程服务器决定交付哪个脚本。可能是https.

可维护性

如您所见，我已经放弃了get_post_meta() 支持单个get_post_custom( get_the_ID() ); 呼叫这意味着您的元数据在JavaScript中可用~/js/3dpiechart.js 具有pie_script_vars.meta. 从那时起，您应该能够包括饼图。您的元数据可能如下所示（示例/缩写）：

array (size=3)
  \'_edit_lock\' => 
    array (size=1)
      0 => string \'1407164887:1\' (length=12)
  \'_edit_last\' => 
    array (size=1)
      0 => string \'1\' (length=1)
  \'wpse_some_key\' => 
    array (size=1)
      0 => string \'Lorem ipsum dolor sitem... tja.\' (length=31)

在这种情况下，您可以使用jsapi.wpse_some_key[0]. 这样很容易维护，因为每次更改某些内容时，都可以避免更改PHP和JS中的键。

在主题中，只需将脚本挂钩更改为wp_enqueue_scripts - 或用于登录/注册/密码丢失页面使用login_enqueue_scripts.

示例插件

一个快速工作（已测试）的示例插件，包含谷歌教程中的模拟数据：

<?php

namespace WPSE;

/** Plugin Name: Google JSAPI test plugin */

add_action( \'admin_enqueue_scripts\', __NAMESPACE__.\'\\addScripts\' );
function addScripts()
{
    wp_enqueue_script(
        \'google-jsapi\',
        \'//www.google.com/jsapi\',
        array(),
        0,
        true
    );

    wp_enqueue_script(
        \'jsapi\',
        plugin_dir_url( __FILE__ ).\'js/jsapi.js\',
        array( \'google-jsapi\', ),
        filemtime( plugin_dir_path( __FILE__ ).\'js/jsapi.js\' ),
        true
    );
    wp_localize_script(
        \'jsapi\',
        \'jsapi\',
        get_post_custom( get_the_ID() )
    );
}

add_action( \'add_meta_boxes_post\', __NAMESPACE__.\'\\addMetaBox\' );
function addMetaBox( $post )
{
    add_meta_box(
        \'piechart\',
        __( \'Your Data\', \'your_textdomain\' ),
        __NAMESPACE__.\'\\MetaBoxContents\',
        \'post\'
    );
}
function MetaBoxContents( $data )
{
    ?><div id="piechart"></div><?php
}

然后添加名为的子文件夹js 在插件文件夹中，添加一个名为jsapi.js 包括以下内容：

/*globals jQuery, $, jsapi, google */

( function( $, plugin ) {
    "use strict";

    google.load( "visualization", "1", {
        packages : [ "corechart" ]
    } );
    google.setOnLoadCallback( function() {
        var data = google.visualization.arrayToDataTable( [
                [ \'Task\',    \'Hours per Day\' ],
                [ \'Work\',     11 ],
                [ \'Eat\',      2 ],
                [ \'Commute\',  2 ],
                [ \'Watch TV\', 2 ],
                [ \'Sleep\',    7 ]
            ] ),
            chart = new google.visualization.PieChart( document.getElementById( \'piechart\' ) );

        chart.draw( data, {
            title : \'My Daily Activities\'
        } );
    } );
} )( jQuery, jsapi || {} );

该插件将在元框中快速打印一个小图表。

下载示例插件是available as GitHub Gist - View Source.