在 web2py 中嵌入 pygal

Question

pygal，在图形字典中呈现 svg 和 returns。我尝试将它嵌入到 web2py 页面中。这样可行。但我不知道如何减小页面上图表的大小。

观点：

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

和default.py函数：

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

Answer 1

看来pygal支持直接在代码中设置大小：http://pygal.org/web/#iddirectly-in-the-html

或者，您可以使用 CSS:

覆盖 SVG 元素的宽度和高度设置

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

注意：我使用 class 选择器的前提是您可能希望不同的 SVG 图像具有不同的尺寸。如果您想要所有图像的大小相同，那么您应该只在 CSS 选择器中使用 svg。另外值得一提的是，您必须覆盖高度和宽度，如果您只覆盖一个，您的 SVG 图像将不会调整大小。

这是一个完整的例子，使用嵌入在 HTML 文件中的 CSS。它表明您可以使用绝对缩放（固定 px 值）以及相对缩放。

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

根据您生成这些文件的方式，嵌入 CSS 可能会更容易，如上所示，但通常我会将我的 CSS 分成一个单独的文件：

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

那么styles.css就是和前面例子中的<style>标签一样的内容：

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

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

在 web2py 中嵌入 pygal

Embedding pygal in web2py

web2py

pygal