it-swarm.com.de

Verwendung von Google Graph API mit WordPress

Ich versuche, ein einzelnes Diagramm auf einer einzelnen WordPress-Seite zu implementieren.

Ich verwende diese Seite aus dem Google-Handbuch - https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs

Um dies in WordPress zu implementieren, habe ich Folgendes versucht: Verwenden von Javascript WordPress Guide-Codex.wordpress.org/Using_Javascript

Die API sagt -

Um JavaScript in Beiträgen in WordPress zu verwenden, müssen Sie einige weitere Schritte ausführen. Es besteht die Möglichkeit, dass diese Verwendung für eine oder nur wenige Instanzen gilt, sodass das Hinzufügen des Skripts zum Header nicht erforderlich ist.

Für die gelegentliche oder einmalige Verwendung von JavaScript müssen Sie das Skript in eine JavaScript-Datei einfügen und dann aus dem Beitrag heraus aufrufen. Stellen Sie sicher, dass jedes Skript durch seinen Funktionsnamen definiert ist, z. B .:

funktion updatepage () {var m = "Seite aktualisiert" + document.lastMo .......}

um Javascript in einen Beitrag aufzunehmen, müssen Sie den Aufruf der Skriptdatei mit dem Aufruf des JavaScript selbst kombinieren.

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

Also habe ich den in der Google-Anleitung angegebenen Javascript-Code hinzugefügt und ihn in eine Funktion wie diese eingeschlossen.

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

Dann speicherte ich diese Datei als updatepage.js und fügte sie meinem Skriptordner (den ich erstellt habe) unter meinem Themenordner hinzu.

Zum Schluss habe ich meiner Seite folgendes hinzugefügt -

<!--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

Link zur Seite: ablueheart.com/js-test

Aber es funktioniert nicht. Jede Hilfe dankbar.

Fragen:

  1. ist mein Verweis "src ="/my-scripts/updatepage.js " auf updatepage.js korrekt?

Wenn ich das auf Googles Seite angegebene Beispiel in eine/html-Datei lege und mit Firefox öffne, wird es korrekt angezeigt.

1
rents

Sie sollten die Funktion updatepage() ausführen, nachdem Sie das Google JSAPI-Skript geladen haben.

versuchen Sie jquery ready in updatepage wie folgt:

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

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

oder Sie können dieses Shortcode-Code Plugin für den einfachen Chart Builder mit Google Jsapi sehen, an dem ich arbeite.

2
Quartet