X

Google Charts in WordPress anzeigen

Schnipsel von IsItWP

Möchten Sie Google Charts in WordPress anzeigen? Unser Snippet erstellt einen neuen Shortcode, der die Google Charts API nutzt. Mit diesem Shortcode können Sie eine Reihe von Diagrammen anzeigen, wie z. B. Linien, xyline, Sparkline, Meter, Scatter, Venn, Pie und Pie2D.

Anweisungen:

Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:

function google_chart_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'data' => '',
	    'size' => '400x180',
	    'colors' => '',
	    'title' => '',
	    'labels' => '',
	    'type' => 'pie',
	    'advanced' => ''
	), $atts));
 
	switch ($type) {
		case 'line' :
			$charttype = 'lc'; break;
		case 'xyline' :
			$charttype = 'lxy'; break;
		case 'sparkline' :
			$charttype = 'ls'; break;
		case 'meter' :
			$charttype = 'gom'; break;
		case 'scatter' :
			$charttype = 's'; break;
		case 'venn' :
			$charttype = 'v'; break;
		case 'pie' :
			$charttype = 'p3'; break;
		case 'pie2d' :
			$charttype = 'p'; break;
		default :
			$charttype = $type;
		break;
	}
 
	if ($title) $string .= '&chtt='.$title.'';
	if ($labels) $string .= '&chl='.$labels.'';
	if ($colors) $string .= '&chco='.$colors.'';
	$string .= '&chs='.$size.'';
	$string .= '&chd=t:'.$data.'';
 
	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'google_chart_shortcode');

Sehen Sie sich das folgende Shortcode-Beispiel eines 3D-Kreisdiagramms an. Ändern Sie das Attribut type in Ihrem Shortcode, um den anzuzeigenden Diagrammtyp anzugeben.

[chart data="41,37.89,10.67,2.03" labels="Reffering+sites|Search+Engines|Direct+traffic|Other"  colors="ff0000,005599,fff000,000000" size="488x200" title="Traffic  Sources" type="pie"]

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzuf ilde{A}gen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress kopieren / einf ilde{A}gen, damit Sie Ihre Website nicht versehentlich besch ilde{A}digen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich auch unsere anderen Artikel auf der Website ansehen, wie zum Beispiel: Die besten WordPress-Seitenersteller (im Vergleich).

Kommentare   Hinterlasse eine Antwort

  1. Hallo, danke dafür. Wie kann ich den gestapelten Balkentyp oder den Messgerätetyp verwenden? Wie kann ich dies weiter anpassen, z. B. mit Opazität und so weiter? Ich hoffe, ich bekomme eine Antwort von Ihnen, danke.

  2. Hallo! Wie füge ich diesem Bild ein Alt-Tag hinzu? Ich gebe an, dass meine Kenntnisse in HTML sehr gering sind 🙂

  3. Tolle Codes. Danke und es hat funktioniert.
    Wie füge ich auch Tabellen aus Google Charts hinzu? Beeinflusst dies auch mein SEO, wenn ich die Tabellen verwende? Danke.

Kommentar hinzufügen

Wir freuen uns, dass Sie einen Kommentar hinterlassen haben. Bitte beachten Sie, dass alle Kommentare gemäß unserer Datenschutzrichtlinie moderiert werden und alle Links nofollow sind. Verwenden Sie KEINE Schlüsselwörter im Namensfeld. Lassen Sie uns ein persönliches und bedeutungsvolles Gespräch führen.

WordPress Launch Checkliste

Die ultimative Checkliste für den Start von WordPress

Wir haben alle wichtigen Checklistenpunkte für den Start Ihrer nächsten WordPress-Website in einem praktischen E-Book zusammengefasst.
Ja, senden Sie mir das kostenlose E-Book!