Einsatz von Hintergrundbild für Diagramme

Mit dem Parameter "canvas_class" definiert man css styling Optionen für den aktuellen canvas. Damit kann man die Hintergrundfarbe oder ein Hintergrundbild anfordern. Man kann dies über ein style-sheet definieren oder man setzt es inline im Artikel via html style-tag:

<style>
.cvs-euro {
    background-image: url('/media/plg_content_rgraph/images/euro.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;";
}
</style>

Parameter zur Erzeugung des Diagramms:

{rgraph height="300" width="700" title="Fahrzeugkosten - günstigste Autos der Oberklasse" type="Bar" variant="glass" data="Porsche Taycan 4S, Range Rover Sport P300, BMW X7 xDrive40d,Mercedes GLS 350, Porsche 911 Carrera, Mercedes G 350d, BMW 840i Gran Coupé, Lexus LC Coupé 500h, Porsche Panamera PDK, Lexus LS 500h/106.7,107.2,112.1,115.5,115.8,117.4,121.1,121.2,125.0,125.2" tooltipsFormattedDecimals="1"
canvas_class="cvs-euro" tooltip="<b style='padding: 10px;font-size: 15px'>#label#<br><span style='padding:15px'>#val# cent pro Kilometer" yaxisScaleUnitsPost=" cent"  xaxisLabelsAngle="30" marginLeft="90" yaxisScaleMin="90" yaxisScaleDecimals="1" yaxisTitle="Cent pro Kilometer" chart_alignment="left" draw_option="draw()" }costs{/rgraph}

Quelle: ADAC (Stand November 2020)

Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.
zurück...