Hi,
ich verwende chart widgets mit der Angabe
data-width="100%" data-height="100%"
style="width:100%;height:100%;"
Die zweite Zeile braucht man anscheinend, damit das Ding überhaupt eine Bezugsgröße hat, glaube ich. Das ist aber nicht mein Problem. Im Prinzip funktioniert das in normalen FTUI-Zellen und ähnlichem wunderbar. Allerdings klappt es nicht auf Popups. Dort bekomme ich rechts immer eine Scrollbar, d.h. die Höhe wird anscheinend nicht korrekt berechnet.
Ich habe versucht, das mit Angaben wie "calc(100% - 10px)" hinzubekommen, aber das macht den Effekt eher schlimmer.
Hier ist das komplette Beispiel:
<div data-type="popup"
data-mode="fade"
data-height="323px"
data-width="760px">
<div>Click me</div>
<div class="dialog">
<div data-type="chart"
data-logdevice="FileLog_HM_21F923"
data-columnspec='["4:HM_21F923.measured-temp\\x3a::"]'
data-style='["SVGplot l0"]'
data-width="100%" data-height="100%"
style="width:100%;height:100%;">
</div>
</div>
</div>
Das sieht dann so aus wie im angehängten Bild. Ich habe auch Beispiele mit einem richtigen Inhalt, aber das ist dann genauso, nur ist das HTML komplizierter.
Ich hätte mir vielleicht das ganze mal im Coding des Chart Widget selbst betrachtet, aber das Ding ist ziemlich riesig. Da wäre zumindest mal ein Hinweis ganz nützlich.
Gruß,
Thorsten
Hi,
noch ein Nachtrag...
Ich habe gerade gesehen, dass es in "normalen" Zellen auch nicht so ganz stimmt. Das Ding ist ein paar Pixel zu hoch und die untere Achsenbeschriftung ragt ein wenig raus. Das konnte ich aber so korrigieren:
style="width:100%;height:calc(100% - 4px);
D.h. ich habe den Container ein bisschen kleiner gemacht. Komischerweise führt das auf dem Popup dazu, dass die Scrollleiste wegfällt und der untere Teil des Charts nicht mehr sichtbar ist. Da man auch keine Scrollleiste mehr hat ist der untere Teil tatsächlich gar nicht mehr "erreichbar".
Gruß,
Thorsten
Probier mal class="fitsize". Das mit der Größe ist vor allem bei Popups etwas knifflig, da die Dinger sich dynamisch vergrößern, und es nicht so einfach ist, das im Chart zum richtigen Zeitpunkt mit zu bekommen, da habe ich ziemlich viel rumprobiert. Wenn diese Klasse gesetzt ist, versucht das Chart die richtige Größe für komplettes Füllen selbst zu berechnen. Zumindest bei mir passt das in Popups eigentlich perfekt.
data-height, data-width und die Styles für height und width brauchst Du dann nicht.
Hi,
das funktioniert auf dem Popup selbst ganz gut (auch wenn jetzt am unteren Rand noch etwas Platz ist). Ansonsten zerhaut mir das mein ganzes Layout. Das finde ich etwas seltsam, da das ganze ja eigentlich nur die Größe des chart Widget ändern sollte.
Das Problem der Popups, die tatsächlich ihre "echte" Größe erst bekommen, wenn sie sichtbar werden, habe ich an anderer Stelle im Prinzip folgendermaßen gelöst:
$(".dialog").on("fadein", function() { resize(id) } );
D.h. für das Widget wird eine resize-Methode aufgerufen wenn das Popup sichtbar wird.
Gruß,
Thorsten
Hi,
jetzt habe ich doch mal ein kleines bisschen in widget_chart.js reindebuggt und eins der Probleme gefunden, die ich mit dem fitsize habe. In FUIP ist jedes widget in ein div eingepackt, welches u.A. die Größe vorgibt. Zusätzlich ist es noch so, dass es in dem div auch noch andere Elemente geben kann, die z.T. neben dem Widget absolut positioniert sind. (Die Handles zum Größer- und Kleinerziehen des Views.) Dadurch wird in widget_chart.js eine falsche Höhe berechnet (in der Regel negativ), was natürlich die Anzeige kaputt macht.
Ich dachte jetzt, dass es vielleicht mit fullsize klappt, aber laut Coding produziert das nur 85% der gewünschten Höhe. ...oder verstehe ich das falsch?
Gruß,
Thorsten
Was gemacht wird ist folgendes:
zunächst wird ein Default Wert gesetzt (das sind die 0.85, ist mehr oder weniger willkürlich, damit das Chart nicht so an den Rand geklatscht wird.
Wenn die Klasse fitsize gesetzt ist, wird die Größe des parents des Chart divs genommen und davon die Summe der Höhen aller siblings (also aller Objekte die sich das umschließende div mit dem Chart teilen) berechnet und von der Gesamthöhe abgezogen. Normalerweise werden divs innerhalt von divs untereinander angeordnet und damit funktioniert das.
Wenn Du jetzt natürlich Objekte auf gleicher Ebene wie das Chart hast, welche sich irgendwie links und rechts davon anordnen, und dadurch die höhe des gesamten Elternobjekts einnehmen, klappt das natürlich nicht. Wenn Du mir ein Beispiel HTML Stück schickst, welches das äußere und alle inneren Objekte inkl. des Charts enthält (mit allen Einstellungen, am besten aus dem Broswer Debug Fenster kopiert nachdem das Ganze aufgebaut ist), dann kann ich mal schauen, was ich machen kann.