web-dev-qa-db-ja.com

ワードプレスでグーグルグラフAPIを使用する

私は1つのワードプレスページに1つのグラフを実装しようとしています。

Googleガイドからこのページを使用しています - https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs

これをワードプレスで実装するために、Using javascript wordpress guide- codex.wordpress.org/Using_Javascriptを試してみました。

apiの語句 -

WordPressの投稿内でJavaScriptを使用するには、さらにいくつかの手順を実行する必要があります。この使用法は1つまたは少数のインスタンスのためのものなので、スクリプトをヘッダーに追加する必要はないでしょう。

JavaScriptを時々使うためには、スクリプトをJavaScriptファイルに入れてから投稿内から呼び出す必要があります。各スクリプトが、次のようにその関数名で定義されていることを確認してください。

function updatepage（）{var m = "ページが更新されました" + document.lastMo .......}

javascriptを投稿に含めるには、スクリプトファイルへの呼び出しとJavaScript自体への呼び出しを組み合わせる必要があります。

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

それで、私はグーグルガイドで与えられたジャバスクリプトコードを加えて、そしてこのような機能でそれを包みました - 

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として保存し、それを私のテーマフォルダの下にある自分で作成したmy-scriptsフォルダに追加しました。

最後に私は私のページに以下を追加しました - 

<!--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への参照 "src ="/my-scripts/updatepage.js "は正しいですか。

Googleのページにある例を/ htmlファイルに入れてFirefoxで開くと、正しく表示されます。

javascriptgoogle
1
rents

あなたはgoogle jsapiスクリプトをロードした後にupdatepage()関数を実行するべきです。

次のようにjqueryの準備をupdatepageの中で試してみてください。

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

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

あるいは、私が取り組んでいるgoogle jsapiを使った簡単なチャートビルダー用のこの ショートコードコード プラグインを見ることができます。

2
Quartet