Dieses Tortendiagramm zeigt, wie man Diagramme in Tooltips einbetten kann. Die Implementierung besteht aus einem Haupt-Diagramm (dem Tortendiagramm) und drei Säulendiagrammen. Wenn man in ein Segment des Tortendiagramms klicked, wird in einem Tooltip ein detailiertes Säulendiagramm angezeigt.
Parameters für die Erstellung der Diagramme
Note: Required parameters to build this kind of chart are marked with red color.Tortendiagramm:
{rgraph title="Umsatz im Januar nach Lokation" width="600" height="350" type="Pie" marginTop="10" marginLeft="60"
marginRight="80" data="Frankfurt,München,Stuttgart/48000,46000,51000" tips_width="350" tips_height="200"
drill_tips="chart1,chart2,chart3" variant="pie3d" radius="80" labelsSticks="1" labelsIngraph="Frankfurt,München,Stuttgart"
labelsIngraphBounding="0" labelsIngraphColor="#f0f0f0" marginBottom="0" draw_option="roundRobin()"}revenue1{/rgraph}
Tooltip Diagramme:
{rgraph data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500" yaxisScaleMax="5000"
type="Bar" drill_chart="chart1" key="Bücher,CDs,DVDs" keyPosition="margin"
marginTop="20" marginBottom="35" marginLeft="35" marginRight="15" xaxisTitle="Woche" xaxisTitlePos="0.7"}tooltip_canvas{/rgraph}
{rgraph data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400" yaxisScaleMax="5000"
type="Bar" drill_chart="chart2" key="Bücher,CDs,DVDs" keyPosition="margin"
marginTop="20" marginBottom="35" marginLeft="35" marginRight="15" xaxisTitle="Woche" xaxisTitlePos="0.7"}tooltip_canvas{/rgraph}
{rgraph data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700" yaxisScaleMax="5000"
type="Bar" drill_chart="chart3" key="Bücher,CDs,DVDs" keyPosition="margin"
marginTop="20" marginBottom="35" marginLeft="35" marginRight="15" xaxisTitle="Woche" xaxisTitlePos="0.7"}tooltip_canvas{/rgraph}
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...
