在wordpress中使用google图形api

Question

我试图在一个wordpress页面上实现一个图。

我正在使用google指南- https://google-developers.appspot.com/chart/interactive/docs/basic_加载_libs的这个页面。

为了在wordpress中实现这一点，我尝试使用javascript wordpress指南-codex.wordpress.org/ the _Javascript

api上说-

要在JavaScript中使用WordPress中的文章，您需要采取更多的步骤。这种使用可能只适用于一个或几个实例，因此将脚本添加到标头中是不必要的。

对于偶尔或一次使用JavaScript，您需要将脚本放入JavaScript文件中，然后从post中调用它。确保每个脚本都由其函数名定义，如：

函数更新(){var m=“页面更新”+document.lastMo.}

要在帖子中包含Javascript，需要将对脚本文件的调用与对JavaScript本身的调用结合起来。

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

所以我在google指南上添加了javascript代码，并将它封装在这样的函数中-

function updatepage(){    // this line added by me

// Load the Visualization API and the piechart package. //copy-paste starts
....
....
chart.draw(data, options);
}                                                       //copy-paste ends

}                       // this line added by me

然后，我将该文件保存为updatepage.js，并将其添加到主题文件夹下的“脚本”文件夹(该文件夹是我创建的)。

最后，我把下面的内容添加到我的页面中-

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/my-scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
Graph should be here
<div id="chart_div" style="width:400; height:300"></div>
end

网页链接: ablueheart.com/js-test

但这是行不通的。任何帮助都很感激。

问题：

1. 我对updatepage.js的引用“updatepage.js”/ my /updatepage.js正确吗？

如果我把给出的例子放在/html文件中的谷歌页面上，然后用火狐打开，它就会正确显示。

Answer 1

您应该在加载google脚本之后运行updatepage()函数。

在updatepage中尝试jquery就绪，如下所示：

function updatepage(){    // this line added by me
    jQuery(document).ready(function ($) {

        // Load the Visualization API and the piechart package.
        ....
        ....
        chart.draw(data, options);
    }       
} 

或者，您可以看到这个用于简单图表构建器的短码码插件，使用的是我正在开发的google。