Bảng điều khiển tương tác Python

pip install dash pandas

Tạo một tệp có tên

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash[]

df = pd.read_csv[
    "//raw.githubusercontent.com/ThuwarakeshM/geting-started-with-plottly-dash/main/life_expectancy.csv"
]

fig = px.scatter[
    df,
    x="GDP",
    y="Life expectancy",
    size="Population",
    color="continent",
    hover_name="Country",
    log_x=True,
    size_max=60,
]

app.layout = html.Div[[dcc.Graph[id="life-exp-vs-gdp", figure=fig]]]


if __name__ == "__main__":
    app.run_server[debug=True]

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash[]

df = pd.read_csv[
    "//raw.githubusercontent.com/ThuwarakeshM/geting-started-with-plottly-dash/main/life_expectancy.csv"
]

fig = px.scatter[
    df,
    x="GDP",
    y="Life expectancy",
    size="Population",
    color="continent",
    hover_name="Country",
    log_x=True,
    size_max=60,
]

app.layout = html.Div[[dcc.Graph[id="life-exp-vs-gdp", figure=fig]]]


if __name__ == "__main__":
    app.run_server[debug=True]

Giờ chiếu. hãy chạy ứng dụng bảng điều khiển bằng lệnh sau

python app.py

Bạn sẽ thấy nó khởi động máy chủ tại cổng 8050. Nếu bạn truy cập http. //127. 0. 0. 1. 8050 trên trình duyệt của mình, bạn sẽ thấy trang tổng quan giống như sau

Bạn sẽ đánh giá cao sự khác biệt nếu bạn đã tạo một ứng dụng tương tự bằng thư viện JavaScript. Dash tiết kiệm rất nhiều thời gian bằng cách loại bỏ một lượng lớn mã soạn sẵn. Ngay cả các công cụ BI phổ biến cũng có rất nhiều công việc chuẩn bị trước để đạt được điểm này

Thật tuyệt vời. Đó là một điều khá thú vị để truyền cảm hứng cho bạn xây dựng bảng điều khiển. Nhưng bạn có thể đã nhận ra rằng nó chưa chói. Trong các phần sau, chúng ta sẽ thảo luận về cách

• chúng tôi có thể cải thiện bố cục;
• thêm các tương tác và gọi lại vào các tiện ích như google analytics và;
• tạo kiểu cho ứng dụng hơn nữa
  

Với điều này, bạn có thể tạo bảng điều khiển rực rỡ mà bạn cần. Duyệt qua thư viện Plotly Dash để biết thêm các trang tổng quan như vậy để lấy cảm hứng

Có liên quan. 7 cách để làm cho cấu trúc dự án Python của bạn thanh lịch hơn

Hãy thêm nhiều tiện ích vào bố cục

Dash tuân theo hệ thống phân cấp phần tử giống như HTML. Bạn có thể đính kèm bất kỳ thành phần HTML hoặc Core nào của Dash vào thuộc tính bố cục của ứng dụng. Thuộc tính bố cục là gốc của hệ thống phân cấp phần tử của ứng dụng Dash

Các thành phần cốt lõi là một tập hợp các tiện ích được định cấu hình sẵn như menu thả xuống và thanh trượt

Các thành phần HTML của Dash bao gồm hầu hết mọi thành phần HTML có sẵn. Để tạo tiêu đề, bạn có thể sử dụng

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash[]

df = pd.read_csv[
    "//raw.githubusercontent.com/ThuwarakeshM/geting-started-with-plottly-dash/main/life_expectancy.csv"
]

fig = px.scatter[
    df,
    x="GDP",
    y="Life expectancy",
    size="Population",
    color="continent",
    hover_name="Country",
    log_x=True,
    size_max=60,
]

app.layout = html.Div[[dcc.Graph[id="life-exp-vs-gdp", figure=fig]]]


if __name__ == "__main__":
    app.run_server[debug=True]

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash[]

df = pd.read_csv[
    "//raw.githubusercontent.com/ThuwarakeshM/geting-started-with-plottly-dash/main/life_expectancy.csv"
]

fig = px.scatter[
    df,
    x="GDP",
    y="Life expectancy",
    size="Population",
    color="continent",
    hover_name="Country",
    log_x=True,
    size_max=60,
]

app.layout = html.Div[[dcc.Graph[id="life-exp-vs-gdp", figure=fig]]]


if __name__ == "__main__":
    app.run_server[debug=True]

app.layout = html.Div[
    [   
        # Dropdown to filter developing/developed country.
        html.Div[
            [
                dcc.Dropdown[
                    id="status-dropdown",
                    options=[{"label": s, "value": s} for s in df.Status.unique[]], # Create available options from the dataset
                ],
            ]
        ],
        # Dropdown to filter countries with average schooling years.
        html.Div[
            [
                dcc.Dropdown[
                    id="schooling-dropdown",
                    options=[
                        {"label": y, "value": y}
                        for y in range[
                            int[df.Schooling.min[]], int[df.Schooling.max[]] + 1
                        ]
                    ], # add options from the dataset.
                ],
            ]
        ],
        # Placeholder to render teh chart.
        html.Div[dcc.Graph[id="life-exp-vs-gdp"], className="chart"],

        # Slider to select year.
        dcc.Slider[
            "year-slider",
            min=df.Year.min[], # dynamically select minimum and maximum years from the dataset.
            max=df.Year.max[],
            step=None,
            marks={year: str[year] for year in range[df.Year.min[], df.Year.max[] + 1]}, # set markers at one year interval.
            value=df.Year.min[],
        ],
    ],
]

Trong đoạn mã trên, chúng tôi đã bao gồm ba thành phần cốt lõi—hai trình đơn thả xuống và một thanh trượt. Các phần tử điều khiển này cho phép chúng tôi lọc dữ liệu biểu đồ và tạo tính tương tác trong phần tiếp theo

Thêm tương tác với các cuộc gọi lại thành phần

Các thành phần cốt lõi của Dash có các lệnh gọi lại để kiểm soát phản hồi đối với hành động của người dùng. Tính năng này rất đáng chú ý vì lý do tại sao các ứng dụng Dash vượt trội hơn các nền tảng BI phổ biến

Bạn có thể sử dụng lệnh gọi lại này để kiểm soát việc hiển thị lại biểu đồ hoặc kích hoạt phân tích nặng. Hãy xem bài viết của tôi về cách thực hiện các phép tính lớn để sử dụng với các ứng dụng Dash và Celery

Ở đây trong bài đăng này, chúng tôi sử dụng các cuộc gọi lại để lọc dữ liệu biểu đồ

@app.callback[
    Output["life-exp-vs-gdp", "figure"],
    Input["year-slider", "value"],
    Input["status-dropdown", "value"],
    Input["schooling-dropdown", "value"],
]
def update_figure[selected_year, country_status, schooling]:
    filtered_dataset = df[[df.Year == selected_year]]

    if schooling:
        filtered_dataset = filtered_dataset[filtered_dataset.Schooling