Yet another Python web framework

environment

• python 3.8

• dash 2.9.2

foreword

dashIt is a library for creating webapplications python. It is built on Plotly.js(developed by the same team), Reactand Flaskabove . The main user groups are data analysts and AIpractitioners. It can help them quickly build very beautiful web applications without you understand javascript.

Install

pipInstall using the command

pip install dash

example

Let's look at the simplest example first

from dash import html, Dash

app = Dash(__name__)
app.layout = html.Div(
    [
        html.H1('第一级标题'),
        html.H2('第二级标题'),
        html.P(['这是一个段落', html.Br(), '换行后的段落']),
        html.Table(
            html.Tr(
                [
                    html.Td('第一列'),
                    html.Td('第二列')
                ]
            )
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

Take a closer look, the structure of the code is very similar to flaskthat of , app.run_serverwhich is to start a webservice , and appthe object of layoutis the page content, in the example, titles, paragraphs and tables

Execute the above code, and then open the page in the browserhttp://127.0.0.1:8050

dash

Callback

DashThe core of the application is the callback function. A callback function is a way of responding to user interaction, such as clicking a button or selecting a drop-down list. We can use callback functions to update component content or perform some action on the page.

DashIn , callback functions app.callbackare defined using the decorator. The input of the callback function is one or more variables, and the output is one or more variables. Here is a simple example

from dash import dcc, html, Dash
from dash.dependencies import Input, Output

app = Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input', value='Dash', type='text'),
    html.Div(id='output')
])

@app.callback(
    Output(component_id='output', component_property='children'),
    [Input(component_id='input', component_property='value')]
)
def update_output_div(input_value):
    return f'您输入的是：{input_value}'

if __name__ == '__main__':
    app.run_server(debug=True)

In this example, we define a layout that contains an input box and an output box. Then, we use app.callbackthe decorator to define a callback function that takes the value of the input box as a parameter and returns a string. The output of the callback function is associated with Outputthe component , i.e. output to outputthe component's childrenproperty .

dash

component interaction

In addition to callback functions, Dashmany interactive components are provided, such as drop-down lists, slider bars, and date pickers. We can use these components to allow users to interact with our application. Here is a simple example

from dash import dcc, html, Dash
from dash.dependencies import Input, Output

app = Dash(__name__)

# 定义下拉选项
dropdown_options = [{'label': 'Blue', 'value': 'blue'},
                    {'label': 'Red', 'value': 'red'},
                    {'label': 'Yellow', 'value': 'yellow'},
                    {'label': 'Green', 'value': 'green'}]

# 定义app布局
app.layout = html.Div([
    dcc.Dropdown(options=dropdown_options,  
                 value='blue', 
                 id='color-dropdown'),

    html.Div('Hello, world!', id='output-div', style={'padding': '20px'}) 
], style={'backgroundColor': 'blue'})  # Set the initial background color

# Define the app callback
@app.callback(Output('output-div', 'style'), [Input('color-dropdown', 'value')])
def update_output_background_color(selected_color):
    if selected_color:
        # 更新div的背景色
        return {'backgroundColor': selected_color} 

if __name__ == '__main__':
    app.run_server(debug=True)

In this example, we use dcc.Dropdownthe component to create a dropdown list and outputassociate its selected value with the component's style. The callback function takes the value of the drop-down list as a parameter and returns a dictionary containing background-colorthe property , which is used to set the background color of the output box.

dash

dash

Summarize

Dashis a powerful Pythonapplication framework for building interactive data visualization dashboards. It provides rich HTMLand interactive components, as well as easy-to-use callback functions, so that we can easily create beautiful applications. Through the introduction of this article, we can understand Dashthe basic structure and usage of and use code samples to demonstrate how to create a simple Dashapplication.

Topics on Python Practical Modules

For more useful pythonmodules , please move to

https://xugaoxiang.com/category/python/modules/