Incorporamento pygal in web2py

pygal, esegue il rendering di uno svg e restituisce nel dizionario dei grafici. Cerco di incorporarlo in una pagina web2py. Che funzioni. Ma non riesco a capire come ridurre la dimensione dei grafici sulla pagina.Incorporamento pygal in web2py

la vista:

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

e la funzione default.py:

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

fonte

2015-07-04 Davoud Taghawi-Nejad

Sembra pygal supporta l'impostazione della dimensione direttamente nel codice: http://pygal.org/web/#iddirectly-in-the-html

In alternativa è possibile ignorare le impostazioni di larghezza e altezza sull'elemento SVG utilizzando i CSS:

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

NOTA: sto utilizzando un selettore di classe supponendo che si desideri dimensioni diverse per immagini SVG diverse. Se vuoi la stessa dimensione per tutte le immagini, dovresti essere bravo con solo svg nel selettore CSS. Vale anche la pena ricordare che è necessario sovrascrivere sia l'altezza che la larghezza, se si esegue solo una immagine SVG non verrà ridimensionata.

Ecco un esempio completo, utilizzando CSS incorporato nel file HTML. Mostra che è possibile utilizzare il ridimensionamento assoluto (valori di px fissi) e il ridimensionamento relativo.

<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>

A seconda di come si sta generando questi file, potrebbe essere più facile da fare CSS incorporato come mostrato sopra, ma in generale vorrei separare la mia CSS in un file separato:

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

Poi styles.css è proprio lo stesso contenuto del tag <style> nell'esempio precedente:

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

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

fonte

2015-07-04 19:09:01 Kal

il problema è che {{= XML (uno)}} rende tutto nche , quindi non posso aggiungere whidth o hight = 80% senza problemi. –

Hey Davoud, stavo effettivamente lavorando con alcuni problemi simili oggi e ho scoperto che potevo fare quello che mi serviva usando i CSS. Ho aggiornato la mia risposta di conseguenza. – Kal

Potresti espandere un po ', dove va il CSS in un file separato? Può essere fatto per ogni grafico svg sulla pagina separatamente? –

risposta

Problemi correlati