Embedding pygal in web2py

pygal, rendert ein svg und kehrt in das Diagrammverzeichnis zurück. Ich versuche, es in eine web2py Seite einzubetten. Das funktioniert. Aber ich kann nicht herausfinden, wie man die Größe der Graphen auf der Seite reduziert.Embedding pygal in web2py

die Ansicht:

{{extend 'layout.html'}} 
<h1>Hello {{=request.vars.simulation_id}}</h1> 
<figure> 
    {{=XML(one)}} 
    {{=XML(two)}} 
</figure>

und die default.py Funktion:

def run_simulation(): 
    simulation = start.Simulation() 
    graphs = simulation.run() 
    return graphs

Quelle

2015-07-04 Davoud Taghawi-Nejad

Es ist wie pygal sieht unterstützt die Größe direkt im Code einstellen: http://pygal.org/web/#iddirectly-in-the-html

Alternativ können Sie außer Kraft setzen die Einstellungen für Breite und Höhe des SVG-Elements mithilfe von CSS:

.svg-container svg { 
     height: 240px; 
     width: 240px; 
}

HINWEIS: Ich verwende einen Klassenselektor unter der Annahme, dass Sie verschiedene Größen für verschiedene SVG-Bilder wünschen. Wenn Sie für alle Bilder dieselbe Größe wünschen, sollten Sie nur mit svg im CSS-Selektor arbeiten. Erwähnenswert ist auch, dass Sie sowohl die Höhe als auch die Breite überschreiben müssen, wenn Sie nur eines machen, wird die Größe Ihres SVG-Bildes nicht geändert.

Hier ist ein vollständiges Beispiel, in dem CSS in die HTML-Datei eingebettet ist. Es zeigt, dass Sie absolute Skalierung (feste px-Werte) sowie relative Skalierung verwenden können.

<html> 
<head> 
    <!-- CSS embedded in HTML here. 
     For reusability you could put the CSS in a separate file 
     and link to it here instead 
    --> 
    <style> 
     /* Add svg-small class to an element to scale the child SVG element(s) to fixed width and height */ 
     .svg-small svg { 
      height: 24px; 
      width: 24px; 
     } 

     /* Add svg-halfwidth class to an element to scale the child SVG element(s) to half the page width 
      The height will scale automatically to preserve the aspect ratio. */ 
     .svg-halfwidth svg { 
      width: 50%; 
      height: auto; 
     } 
    </style> 
</head> 
<body> 
<figure class="svg-small"> 
<caption>A small droid</caption> 
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/> 
</svg> 
</figure> 

<figure class="svg-halfwidth"> 
<caption>A scaled droid</caption> 
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/> 
</svg> 
</figure> 
</body> 
</html>

Je nachdem, wie Sie diese Dateien erzeugen, kann es einfacher sein eingebettet CSS zu tun, wie oben gezeigt, aber im Allgemeinen würde ich meine CSS in eine separate Datei trennen:

<html> 
<head> 
    <link rel="stylesheet" href="styles.css"/> 
<head> 
<body> ... as before ... </body> 
</html>

Dann styles.css ist nur der gleiche Inhalt wie die <style> Tag im vorherigen Beispiel:

.svg-small svg { 
    height: 24px; 
    width: 24px; 
} 

.svg-halfwidth svg { 
    width: 50%; 
    height: auto; 
}

Quelle

2015-07-04 19:09:01 Kal

das Problem ist, dass {{= XML (eins)}} alles

Hey Davoud, ich habe heute mit ähnlichen Problemen gearbeitet und festgestellt, dass ich mit CSS das tun kann, was ich brauche. Ich habe meine Antwort entsprechend aktualisiert. – Kal

Können Sie etwas erweitern, wohin geht das CSS in einer separaten Datei? Kann es für jedes SVG-Diagramm auf der Seite separat gemacht werden? –

Antwort

Verwandte Themen