Tortendiagramm mit Werten aus webEdition-Seite erstellen
Das folgende Beispiel zeigt Ihnen, wie Sie ein Tortendiagramm mit Werten aus einer webEdition-Seite erstellen.
Tortendiagramm mit Werten aus webEdition-Seite erstellen
Das folgende Beispiel zeigt Ihnen, wie Sie ein Tortendiagramm mit Werten aus einer webEdition-Seite erstellen.
Sie geben dabei dem Radakteur die Möglichkeit zur Eingabe beliebig vieler Werte für die Tortenstücke und den dazugehörigen Prozentangaben. Die Farbe der Tortenstücke kann der Redakteur auswählen. Dabei wird die vom Redakteur ausgewählte Farbe als Farbe für das größte Tortenstück verwendet. Je kleiner die Tortenstücke werden, desto heller werden sie. Zu jedem Tortenstück wird eine Beschriftung (Legende) angezeigt.
Das Tortendiagramm (Grafik) wird mit Hilfe der https://code.google.com/apis/chart/ erzeugt.
Screenshot - Ausgabe
Quellcode
<html>
<head>
<we:title></we:title>
<we:description/>
<we:keywords/>
<we:charset defined="UTF-8">UTF-8</we:charset>
<we:ifEditmode>
<!--
Dieses CSS-Definitionen dienen dazu, Formatierung innerhalb
der Ansicht "Bearbeiten" für den Redakteur durchzuführen.
-->
<style type="text/css">
.editmode {
color: #FF0000;
font-family: arial;
font-size: 12px;
}
div.editmode-list {
margin: 5px 0 5px 0;
}
div.editmode-list > table {
float: left;
margin-right: 10px;
}
</style>
</we:ifEditmode>
<we:ifNotEditmode>
<style type="text/css">
html {
font-family: arial;
font-size: .8em;
color: #000000;
}
a {
color: #000000;
}
</style>
</we:ifNotEditmode>
</head>
<body>
<!--
Dieser Bereich ist nur für den Redakteur innerhalb
der Dokumentenansicht Bearbeiten sichtbar.
-->
<we:ifEditmode>
<div class="editmode-list">
<we:block name="Data">
<span class="editmode">Was: </span>
<we:input type="text" name="What" size="20"/>
<span class="editmode">Wieviel: </span>
<we:input type="text" name="HowMuch" size="5"/>%
<br style="clear: both;" />
</we:block>
<br style="clear: both;" />
</div>
<table>
<tr>
<td class="editmode">Farbe der Tortenstücke:</td>
<td><we:colorChooser name="PieColor" width="20" height="16"/></td>
</tr>
<tr>
<td class="editmode">Breite der Grafik:</td>
<td>
<we:select name="Width" size="1">
<option>100</option>
<option>150</option>
<option>200</option>
<option>250</option>
<option>300</option>
<option>350</option>
<option>400</option>
<option>450</option>
<option>500</option>
<option>550</option>
<option>600</option>
<option>650</option>
<option>700</option>
</we:select>
Pixels
</td>
</tr>
</table>
</we:ifEditmode>
<!-- Dieser Bereich ist nicht in der Dokumentenansicht Bearbeiten sichtbar. -->
<we:ifNotEditmode>
<!-- Prozentwerte für die Größe der Tortenstücke -->
<?php $GLOBALS['chd'] = (string) ''; ?>
<we:block name="Data">
<we:setVar to="global" nameto="HowMuch" from="block" namefrom="HowMuch" typefrom="text"/>
<?php $GLOBALS['chd'] .= $GLOBALS['HowMuch']; ?>
<we:ifNotPosition type="block" position="last" reference="Data">
<?php $GLOBALS['chd'] .= ','; ?>
</we:ifNotPosition>
</we:block>
<!-- Beschriftung (Legende) der Tortenstücke -->
<?php $GLOBALS['chl'] = (string) ''; ?>
<we:block name="Data">
<we:setVar to="global" nameto="What" from="block" namefrom="What" typefrom="text"/>
<?php $GLOBALS['chl'] .= urlencode($GLOBALS['What']); ?>
<we:ifNotPosition type="block" position="last" reference="Data">
<?php $GLOBALS['chl'] .= '|'; ?>
</we:ifNotPosition>
</we:block>
<!-- Ausgewählte Farbe der Tortenstücke in eine globale PHP-Variable speichern -->
<we:setVar to="global" nameto="PieColor" from="top" namefrom="PieColor"/>
<!-- Führendes #-Zeichen entfernen -->
<?php $GLOBALS['PieColor'] = substr($GLOBALS['PieColor'], 1); ?>
<!-- Ausgewählte Breite in eine globale PHP-Variable speichern -->
<we:setVar to="global" nameto="Width" from="top" namefrom="Width"/>
<p>
<!-- Tortendiagramm ausgeben -->
<img src="https://chart.apis.google.com/chart?cht=p&chd=t:<we:var type="global" name="chd"/>&chs=<we:var type="global" name="Width"/>x200&chl=<we:var type="global" name="chl"/>&chco=<we:var type="global" name="PieColor"/>" alt="" />
</p>
</we:ifNotEditmode>
</body>
</html>Screenshot - Eingabe
