如何 position 一個 pygal 圖表？（燒瓶）

Question

以前我問過如何在 flask 應用程序中正確渲染 pygal； 如何在 flask 應用程序上嵌入 pygal 圖表？ . 現在我在問你如何正確 position 呢？ 這就是我定位它的意思，我想把圖表放在我的屏幕或任何屏幕的中間。

我的代碼：

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

這是 HTML/CSS 問題。

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