Umieszczanie pygalu w web2py

pygal, renderuje svg i zwraca w słowniku wykresów. Próbuję umieścić go na stronie web2py. To działa. Ale nie wiem, jak zmniejszyć rozmiar wykresów na stronie.Umieszczanie pygalu w web2py

widok:

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

a funkcja default.py:

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

Źródło

2015-07-04 Davoud Taghawi-Nejad

Wygląda pygal obsługuje ustawienie rozmiaru bezpośrednio w kodzie: http://pygal.org/web/#iddirectly-in-the-html

Alternatywnie można przesłonić ustawienia szerokości i wysokości elementu SVG za pomocą CSS:

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

UWAGA: Używam selektora klasy przy założeniu, że możesz chcieć różnych rozmiarów dla różnych obrazów SVG. Jeśli chcesz mieć taki sam rozmiar dla wszystkich obrazów, powinieneś być dobry tylko z svg w selektorze CSS. Warto również wspomnieć, że musisz przesłonić zarówno wysokość, jak i szerokość, jeśli po prostu to zrobisz, obraz SVG nie zmieni rozmiaru.

Oto pełny przykład, używając CSS osadzonego w pliku HTML. Pokazuje to, że możesz użyć skalowania bezwzględnego (stałe wartości px) oraz skalowania względnego.

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

W zależności od sposobu wytwarzania tych plików, może to być łatwiejsze do zrobienia osadzony CSS, jak wykazano powyżej, ale w ogóle bym oddzielić mój CSS w oddzielnym pliku:

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

Then styles.css tylko te same treści co znacznika <style> w powyższym przykładzie:

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

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

Źródło

2015-07-04 19:09:01 Kal

problemem jest to, że {{= XML (jeden)}} powoduje wszystko ven , więc nie mogę dodać whidth lub wysokości = 80% bez żadnych problemów. –

Hej Davoud, faktycznie pracowałem z podobnymi problemami dzisiaj i odkryłem, że mogłem zrobić to, czego potrzebowałem używając CSS. Odpowiednio zaktualizowałem swoją odpowiedź. – Kal

Czy możesz nieco rozszerzyć, skąd CSS przechodzi w osobnym pliku? Czy można to zrobić dla każdego wykresu svg na stronie osobno? –

Umieszczanie pygalu w web2py

Odpowiedz

Powiązane problemy