Shulou(Shulou.com)06/01 Report--

This article is to share with you about how Python makes visual reports. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Visual report results are as follows, fruit sales at a glance ~

Dash is a Dashbord framework based on Plotly, which supports Python, R and Julia. With Dash, you can create custom responsive dashboards.

Related documents

Description: https://dash.plotly.com/introduction

Case: https://dash.gallery/Portal/

Tailwindcss is a utility-first CSS framework for quickly building custom interfaces.

This framework only applies to the front end that only implements the page layout beautification elements and does not care about implementing the business logic.

Looking at what other people think of it, it's enough for a non-interactive chart.

Related documents

Description: https://www.tailwindcss.cn/docs

Here's how to build visual reports through Dash+Tailwindcss.

Install the relevant Python libraries first, and then import them.

Import dashimport pandas as pdimport plotly.express as pxfrom dashimport dcc, html

Three Python libraries, Pandas, Plotly and dash, are used.

We need to take Tailwindcss's CDN as external_script and pass it to our application instance so that we can successfully use Tailwindcss.

# Import CDNexternal_script of tailwindcss = ["https://tailwindcss.com/", {" src ":" https://cdn.tailwindcss.com"}] # create Dash instance app = dash.Dash (_ _ name__, external_scripts=external_script,) app.scripts.config.serve_locally = True

Use Pandas to create fruit sales data and make up a random one.

# create data df = pd.DataFrame ({"Fruit": ["Apple", "Orange", "Banana", "Apple", "Orange", "Banana"), "Amount": [4.2,1.0,2.1,2.2,2.32,4.20,5.0], "City": ["Beijing", "Shanghai" "Shanghai", "Shanghai"],}) print (df)

The results are as follows, 3 columns and 6 rows, including fruit, sales, and city columns.

Deal with the relevant data, fruit odd, total sales, city odd, variable number.

# Fruit singular fruit_count = df.Fruit.count () # Total sales total_amt = df.Amount.sum () # City singular city_count = df.City.count () # variable variables = df.shape [1]

Create a chart instance, a bar chart, a box chart.

# histogram 1, sales in different cities of different fruits fig = px.bar (df, x = "Fruit", y = "Amount", color= "City", barmode= "group") # Box figure 1, sales distribution in different cities fig1 = px.box (df, x = "City", y = "Amount", color= "City")

The effect is as follows.

The rest is the text module, text + CSS style.

One of the layout beautification, through Tailwindcss to achieve.

App.layout = html.Div (html.Div [html.Div (children= [html.H1 (children= "Fruit sales-Visual report", className= "py-3 text-5xl font-bold text-gray-800"), html.Div (children= "" Python with Dash =? ClassName= "text-left prose prose-lg text-2xl py-3 text-gray-600",),], className= "w-full mx-14 px-16 shadow-lg bg-white-mt-14 px-6 container my-3",) Html.Div (html.Div (children= [html.Div (children= [f "{total_amt}", html.Br ()) Html.Span ("className=" text-lg font-bold ml-4 "),], className=" shadow-xl py-4 px-14 text-5xl bg- [# 76c893] text-white font-bold text-gray-800 ",) Html.Div (children= [fruit_count, html.Br (), html.Span ("number of fruits", className= "text-lg font-bold ml-4"),] ClassName= "shadow-xl py-4 px-24 text-5xl bg- [# 1d3557] text-white font-bold text-gray-800",), html.Div (children= [variables Html.Br (), html.Span ("variable", className= "inline-flex items-center text-lg font-bold ml-4"),], className= "shadow-xl py-4 px-24 text-5xl bg- [# 646ffa] text-white font-bold text-gray-800" ), html.Div (children= [city_count, html.Br (), html.Span ("number of cities", className= "text-lg font-bold ml-4") ], className= "w-full shadow-xl py-4 px-24 text-5xl bg- [# ef553b] text-white font-bold text-gray-800",),] ClassName= "my-4 w-full grid grid-flow-rows grid-cols-1 lg:grid-cols-4 gap-y-4 lg:gap- [60px]",), className= "flex max-w-full justify-between items-center",) Html.Div (children= [html.Div (children= [dcc.Graph (id= "example-graph", figure=fig),], className= "shadow-xl w-full border-3 rounded-sm",) Html.Div (children= [dcc.Graph (id= "example-graph2", figure=fig1),], className= "w-full shadow-2xl rounded-sm",),] ClassName= "grid grid-cols-1 lg:grid-cols-2 gap-4",),], className= "bg- [# ebeaee] flex py-14 flex-col items-center justify-center",), className= "bg- [# ebeaee] container mx-auto px-14 py-4",)

The effect is as follows.

Finally, start the program code.

If _ _ name__ ='_ _ main__': # debug mode, port 7777 app.run_server (debug=True, threaded=True, port=7777) # normal mode, the debug button in the lower right corner of the page will not appear # app.run_server (port=7777)

In this way, you can see the large visual screen page locally, and the browser opens the following address.

Http://127.0.0.1:7777

Thank you for reading! On "Python how to make visual reports" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.