如何 position 一个 pygal 图表？（烧瓶）

Question

Previously i asked about how to properly render a pygal in a flask app;以前我问过如何在 flask 应用程序中正确渲染 pygal； How to embedding a pygal chart on a flask app? 如何在 flask 应用程序上嵌入 pygal 图表？ . . now i am asking how would you properly position it?现在我在问你如何正确 position 呢？ this is what i mean by positioning it, i want to place the chart in the middle of my screen or any screen.这就是我定位它的意思，我想把图表放在我的屏幕或任何屏幕的中间。

My code:我的代码：

import pygal
from flask import Flask
import webbrowser as web
import socket

def test(name=None):
    def top_bar():
        return('''
               <style>
                
               .top_bar {
                 position: fixed;
                 top: 0px;
                 left: 0px;
                 right: 0px;
                 width: 100%;
                 background-color: #4CAF50;
                 color: white;
                 text-align: center;
                }
                
               </style>
               
               
               <head>
                   <title>Tkboard</title>
               </head>
             
             
               <div class="top_bar">
                   <h1 style="font-size:25px"><p style="font-family:verdana">Tkboard</p></h1>
               </div>
             
             ''')        
               
    
    app = Flask(__name__)
    
    def __info__():
        hostname = socket.gethostname()
        ip = socket.gethostbyname(hostname)
        port = int(5969)
        all_val = [str(ip),port]
        return all_val

    all_val = __info__()
    
    
    
    @app.route('/')
    def __main__():
        line_chart = pygal.Line(width=550, height=350,explicit_size=True)
        line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
        line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
        line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
        line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
        #line_chart.render()
        # Mixed
        output = f'''{top_bar()}
               <img src="{line_chart.render_data_uri()}" />
               
               
               '''
               
        return output
               
    __main__()
    url=(f'http://{all_val[0]}:{all_val[1]}')
    web.open(url)
    app.run(all_val[0],all_val[1])
        
test()

Answer 1

It is HTML/CSS problem.这是 HTML/CSS 问题。

Add <div> to wrap <img> and add text-align: center CSS atribute to wrapper <div> .添加<div>以包装<img>并将text-align: center CSS 属性添加到包装器<div> 。

import socket
import webbrowser as web

import pygal
from flask import Flask


def test(name=None):
    def top_bar():
        return """
               <style>
               .top_bar {
                 position: fixed;
                 top: 0px;
                 left: 0px;
                 right: 0px;
                 width: 100%;
                 background-color: #4CAF50;
                 color: white;
                 text-align: center;
                 height: 100px;
                }
               .image_wrapper {
                 text-align: center;
                 margin-top: 100px;
               }
               </style>
               <head>
                   <title>Tkboard</title>
               </head>
               <div class="top_bar">
                   <h1 style="font-size:25px"><p style="font-family:verdana">Tkboard</p></h1>
               </div>
             """

    app = Flask(__name__)

    def __info__():
        hostname = socket.gethostname()
        ip = socket.gethostbyname(hostname)
        port = int(5969)
        all_val = [str(ip), port]
        return all_val

    all_val = __info__()

    @app.route("/")
    def __main__():
        line_chart = pygal.Line(width=550, height=350, explicit_size=True)
        line_chart.add(
            "Firefox", [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]
        )
        line_chart.add(
            "Chrome", [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3]
        )
        line_chart.add(
            "IE", [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]
        )
        line_chart.add(
            "Others", [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]
        )
        # line_chart.render()
        # Mixed
        output = f"""{top_bar()}
               <div class="image_wrapper">
                 <img src="{line_chart.render_data_uri()}" />
               </div>
               """

        return output

    __main__()
    url = f"http://{all_val[0]}:{all_val[1]}"
    web.open(url)
    app.run(all_val[0], all_val[1])


test()

如何 position 一个 pygal 图表？（烧瓶）

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-12-25 01:42:18

如何 position 一个 pygal 图表？ （烧瓶）

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-12-25 01:42:18

如何 position 一个 pygal 图表？（烧瓶）

解决方案1
1 已采纳 2020-12-25 01:42:18