代码收藏家技术教程 2024-12-21

Python Dash 小白教程：手把手教你做 IMDB 数据仪表盘

基于Python语言Dash库的IMDB数据分析及可视化互动数据样板教程

1. 背景介绍

Dash是一款用于构建Web应用的Python低代码框架。它建立在Plotly.js、React和Flask之上，可以将现代UI元素（如下拉框、滑块、图形等）直接与Python代码绑定，轻松实现数据的动态展示。通过Dash，用户可以快速创建出具备交互功能的可视化应用。

Dash的代码是声明式和反应式的，能够灵活地构建包含各种交互元素的复杂应用。丰富的Dash组件库允许制作多种类型的图表，包括统计图表、地图、三维动画等，并将它们集成到统一的Dashboard中。此外，Dash还可以应用于自然语言处理、对象检测和预测分析等AI领域，功能远超传统BI工具。

2. Dash常用组件介绍

在Dash中，组件是构建仪表盘的基本单元。Dash提供了许多基础UI组件和核心组件，帮助我们快速创建交互式Web应用。在接下来的教程中，我们将用到其中的一些常用组件。以下是部分常用组件的简单介绍：

2.1 基础UI组件（Dash HTML Components）

• html.Div：容器组件，用于包含和组织其他组件，类似HTML中的<div>标签。

• html.H1 – html.H6：标题标签，从一级标题到六级标题，用于显示不同级别的标题。

• html.P：段落组件，用于显示文本内容。

• html.Img：图片组件，可以在应用中展示图像。

• html.A：超链接组件，用于创建链接。

• html.Button：按钮组件，可用于交互，如提交数据或触发回调。

• html.Label：标签组件，常用于标注其他表单元素（如输入框或选择框）。

2.2 核心组件（Dash Core Components）

• dcc.Graph：图表组件，支持Plotly的多种图表类型，如折线图、散点图、柱状图、饼图等，是数据可视化的主要组件。

• dcc.Dropdown：下拉选择框，支持单选或多选，常用于数据筛选。

• dcc.Input：输入框组件，允许用户输入文本或数值。

• dcc.Slider：滑块组件，用于选择一个范围内的数值，适合范围数据选择。

• dcc.RangeSlider：范围滑块组件，可以选择一个连续区间（如评分的起始和结束值）。

• dcc.Checklist：复选框列表，允许用户进行多选操作。

• dcc.RadioItems：单选按钮组，用于在多个选项中进行单选。

• dcc.Tabs 和 dcc.Tab：选项卡组件，可在页面中切换不同内容视图。

• dcc.DatePickerSingle 和 dcc.DatePickerRange：日期选择器，分别用于选择单个日期或日期范围。

• dcc.Upload：文件上传组件，允许用户上传文件，适用于数据输入或更新。

以上是部分Dash中常用的组件，后续我们将在教程中使用其中一些组件来搭建一个简单的IMDB电影数据仪表盘。

3. 数据介绍

在本教程中，我们将使用一个IMDB电影数据集，数据集包含关于电影的多种信息，如电影类型、评分、收入等。通过分析这些数据，我们将创建动态的可视化展示，帮助用户更好地理解电影数据的特点。

• 数据来源：IMDB Movie Dataset

4. 环境说明

• Python版本：3.12.4

• IDE：Jupyter Notebook

5. 正式教程

接下来，我们将正式进入保姆级教程！！！

5.1 安装DASH

在正式开始创建仪表盘之前，我们需要安装Dash库。Dash库依赖于dash、plotly和pandas等包，通过以下简单的步骤，你可以完成安装。

# pip 是 Python 的包管理工具，类似于应用商店，用来安装和管理 Python 包（库）

# 通过 pip，我们可以从 Python 的官方包仓库（PyPI）中下载和安装各种 Python 包

# install 是 pip 的一个命令，用于安装后面指定的 Python 包

# 当我们输入 pip install 时，pip 会自动查找并安装指定的包

# dash 是我们要安装的具体包的名字

# 我们在这一步安装 Dash 后，就可以在 Python 项目中使用它

!pip install dash

安装 Dash（使用国内镜像源）

如果你在安装过程中遇到网络连接问题，可以使用国内的镜像源来加速下载。以下是通过百度镜像源安装Dash的命令：

# 使用百度镜像源安装 Dash

!pip install dash -i https://mirror.baidu.com/pypi/simple

Hello Dash

在正式开始之前，我们可以先运行一个简单的“Hello Dash”程序，来确认Dash已经正确安装，并能在你的电脑上正常运行，输入以下代码并运行：

# 从 Dash 库中导入 Dash 和 html 模块

# Dash 是一个用于构建 web 应用的 Python 框架，适合构建交互式数据可视化网页应用

# html 模块包含了可以生成 HTML 元素的类，比如 <div>、<h1>、<p> 等

from dash import Dash, html

# 创建一个 Dash 应用的实例，并命名为 app

# 这个实例是我们整个应用的核心，所有的页面布局和交互逻辑都会依赖于这个实例

app = Dash()

# 定义应用的页面布局（layout），它指定了页面的内容和结构

# layout 是应用的主要内容部分，用于描述用户将看到的页面布局

app.layout = [

    # 使用 html.Div 创建一个 HTML 的 <div> 容器

    # <div> 是一种通用的 HTML 容器元素，用来包裹其他元素或文本

    # children 参数指定 <div> 中的内容，这里放置的是一个简单的字符串 'Hello Dash'

    # 这样浏览器加载页面时，会在网页上显示 "Hello Dash"

    html.Div(children='Hello Dash')

]

# 这段代码用于启动应用的服务器，监听本地的请求并在浏览器中显示页面

# 当我们直接运行这个 Python 脚本时，这段代码会被执行

if __name__ == '__main__':

    # 启动应用的服务器，debug=True 表示开启调试模式

    # debug=True 的作用是帮助我们快速发现错误

    # 在调试模式下，如果代码有问题，浏览器会显示错误信息，便于我们找到错误原因

    app.run(debug=True)

在 Jupyter Notebook 中：如果你在Jupyter Notebook中运行这段代码，应用会直接嵌入在Notebook中显示，无需打开浏览器新窗口。

在其他编辑器中（如VS Code、PyCharm）：运行后，会在控制台输出一个网址，点击后即可查看。

出现以上画面则表明dash安装成功！

5.2 安装 pandas 库

pandas 是 Python 的一个数据分析库，专门用于处理表格和结构化数据。它能帮助我们轻松地读取、清洗和操作数据。

在 pandas 中，主要使用两种数据结构：

• DataFrame：用于存储表格数据，类似于电子表格或数据库表。

• Series：用于存储一列数据。

pandas 可以从多种数据源（如 CSV 文件、Excel 表）加载数据，并支持各种数据操作，如筛选、分组和统计分析。在本教程中，我们将使用 pandas 读取和处理 IMDB 数据，为后续的可视化分析做准备

如果还没有安装pandas库，可以使用以下命令进行安装：

!pip install pandas

5.3 读取数据

首先，我们需要从Kaggle下载IMDB数据集。可以在Kaggle网站上搜索并下载IMDB电影数据集，Kaggle是一个数据科学平台，提供了大量公开数据集供大家使用。数据集下载页面可以在Kaggle网站上找到。

Find Open Datasets and Machine Learning Projects | Kaggle

下载数据后，我们将使用pandas库读取数据并进行一些初步的数据处理。

# 导入 dash 库，这是我们之前安装的一个 Python 库

# 每次在代码中使用 dash 库之前，必须通过 import 语句导入它

# 通过导入，Python 才能识别并使用 dash 提供的各种功能和模块

import dash

# 导入 pandas 库并命名为 pd

import pandas as pd

# 使用 pandas 的 read_csv 函数读取名为 'imdb_movie_dataset.csv' 的 CSV 文件，并将其加载为 DataFrame

# DataFrame 是一种二维数据结构，可以理解为带有行列标签的表格，非常适合处理和分析结构化数据

df = pd.read_csv('imdb_movie_dataset.csv')

# 删除 DataFrame 中的 'Rank' 列

# drop 方法用于删除指定的行或列，'Rank' 是我们要删除的列名

# axis=1 表示删除的是列而非行，inplace=True 表示直接在原 DataFrame 上进行修改

df.drop('Rank', axis=1, inplace=True)

# 删除 DataFrame 中的 'Metascore' 列

# 这里的操作与上一步相同，删除的是 'Metascore' 列

df.drop('Metascore', axis=1, inplace=True)

# 将 'Revenue (Millions)' 列的数据类型转换为数值类型

# 通过 pd.to_numeric 函数，将列 'Revenue (Millions)' 中的字符串转换为数值

# errors='coerce' 表示如果遇到无法转换为数值的数据，将其设置为 NaN（空值），这有助于处理缺失或无效数据

df['Revenue (Millions)'] = pd.to_numeric(df['Revenue (Millions)'], errors='coerce')

5.4 绘图

接下来，我们将尝试绘制一个简单的图表，展示每一年发布的电影数量变化趋势。这可以帮助我们了解不同时期电影产出的变化情况。

统计每年的电影数量

首先，我们需要统计每一年的电影数量，并将统计结果按年份升序排列。

# 将 'Year' 列的数据类型转换为整数类型（int）

# 这里的目的是确保 'Year' 列中的年份数据是整数格式，便于后续的排序和分组操作

df['Year'] = df['Year'].astype(int)

# 使用 value_counts() 函数统计每一年的电影数量

# value_counts() 会计算 'Year' 列中每个年份出现的次数，得到每一年的电影数量

# sort_index() 函数对统计结果按年份顺序进行排序

# 结果是一个按年份排序的 Series，其中索引是年份，值是该年上映的电影数量

year_counts = df['Year'].value_counts().sort_index()

安装并使用 matplotlib 绘制折线图

matplotlib 是一个强大的数据可视化库，提供了丰富的图表类型（如折线图、柱状图、散点图等），并允许用户对图表进行高度自定义。它的绘图风格灵活，非常适合需要细节控制的场合。

在本教程中，我们将使用 matplotlib 绘制各年电影数量的折线图，并在折线上标注每年的数据点，以便更直观地查看具体的数值。

安装 matplotlib, 用咱之前介绍的相同方法安装

!pip install matplotlib

然后，用matplotlib绘制折线图，同时把数据标注在折线上

# 导入 matplotlib 库中的 pyplot 模块，并将其命名为 plt

# matplotlib 是一个用于数据可视化的 Python 库，而 pyplot 是其中一个模块，提供了很多绘图函数

import matplotlib.pyplot as plt

# 使用 plt.plot() 函数绘制折线图

# year_counts.index 是 x 轴的年份，year_counts.values 是 y 轴每年电影的数量

plt.plot(year_counts.index, year_counts.values)

# 设置 x 轴标签为 'Year'，表示年份

plt.xlabel('Year')

# 设置 y 轴标签为 'Number of Movies'，表示电影数量

plt.ylabel('Number of Movies')

# 设置图表标题为 'Yearly Variation in Number of Movies'，帮助理解图表的主题

plt.title('Yearly Variation in Number of Movies')

# 使用 for 循环遍历 year_counts.index 和 year_counts.values，将每个点的 y 值标注在图上

# zip 函数将两个列表（年份和电影数量）合并在一起，便于同时遍历

for x, y in zip(year_counts.index, year_counts.values):

    # 使用 plt.text() 在折线图上的每个数据点处添加文本

    # x 和 y 分别是当前数据点的 x 和 y 坐标，str(y) 是显示的文本内容，即电影数量

    # ha='center' 表示文本水平居中，va='bottom' 表示文本在数据点上方

    plt.text(x, y, str(y), ha='center', va='bottom')

# 显示图表

plt.show()

运行代码，我们可以得到如下图像：

但如何将图像放置到页面，使用户可以通过网页查看生成的图像呢？

这时，我们就要用到今天的主角——Dash！

在前面，我们已经尝试过在Dash页面布局中添加文字。这次，我们将把绘制的折线图添加到Dash应用中，供用户查看。具体步骤如下：

# 安装 dash-bootstrap-components 库

# dash-bootstrap-components 是一个为 Dash 框架提供 Bootstrap 组件的库

# 这些组件帮助我们更方便地创建美观且响应式的 Dash 应用界面

!pip install dash-bootstrap-components

首先，我们使用 plotly.express 库绘制一个折线图，将数据和标题设置为“每年电影数量变化趋势”：

# 导入 plotly.express 库，并将其重命名为 px

# plotly.express 是 Plotly 中一个简化绘图库，用于快速创建交互式图表，比如折线图、条形图等

import plotly.express as px

# 导入 dash-bootstrap-components 库，并重命名为 dbc

# 这个库提供了基于 Bootstrap 的组件，可以帮助我们快速创建布局和响应式界面

import dash_bootstrap_components as dbc

# 从 dash 库导入 dcc 和 html 模块

# dcc 模块包含 Dash Core Components，提供图表、滑块等组件

# html 模块包含 HTML 元素，用于构建页面布局，比如标题、段落等

from dash import dcc, html

# 使用 plotly.express 绘制折线图

# year_counts 是一个包含每年电影数量的数据，title 参数用于设置图表标题

# fig 是绘制的图表对象，后面会在 Dash 应用中展示

fig = px.line(year_counts, title='Trend of Movie Counts by Year')

接下来，我们创建一个 Dash 应用实例：

# 创建一个 Dash 应用的实例，命名为 app

# 这个实例是整个应用的核心，管理应用的布局和交互逻辑

app = dash.Dash()

设置页面布局，大标题H1为每年电影数量变化趋势，然后用dash_core_components去创建一个组件Graph，将先前画好的图传入：

# 定义应用的布局，使用 Bootstrap 组件创建响应式布局

# dbc.Container 创建一个容器，用于包含页面内容

app.layout = dbc.Container([

    # 添加一个一级标题（<h1>）显示在页面顶部

    html.H1("Trend of Movie Counts by Year"),



    # 使用 dcc.Graph 组件在页面中展示图表

    # figure 参数指定显示的图表对象，这里是我们创建的 fig 折线图

    dcc.Graph(figure=fig)

])

最后，运行 Dash 应用。

# 只有在直接运行此脚本时才启动应用服务器

# 如果此文件被导入到其他文件中，服务器不会启动

if __name__ == '__main__':

    # 启动应用的服务器，debug=True 表示开启调试模式

    # 在调试模式下，如果代码有错误，浏览器会显示详细的错误信息

    app.run_server(debug=True)

PS：如果标题是中文，可能会出现编码错误，导致中文显示为白色方框或乱码。为避免此类问题，我们可以在代码开头添加以下两行代码，以确保中文能够正确显示：

import matplotlib.pyplot as plt

# 设置字体为 SimHei，用于支持中文显示

plt.rcParams['font.sans-serif'] = ['SimHei']

# 解决负号显示问题

plt.rcParams['axes.unicode_minus'] = False

5.5 第一个仪表盘的制作

接下来，我们将尝试制作一个简单的仪表盘，展示“前十名作品最多的导演”。通过这个仪表盘，我们可以直观地看到哪些导演的作品数量最多。

首先，我们需要统计数据集中每位导演的作品数量。然后，将统计结果按降序排列，取出前十名，作为我们绘图所需的数据。

# 统计 DataFrame 中 'Director' 列中每个导演的出现次数

# value_counts() 函数会计算 'Director' 列中每个导演的出现次数，得到每个导演执导的电影数量

# sort_values(ascending=False) 按照电影数量降序排列，便于找到最受欢迎的导演

director_counts = df['Director'].value_counts().sort_values(ascending=False)

# 获取电影数量最多的前 10 位导演

# head(10) 函数返回排序后的前 10 个值，即电影数量最多的前 10 位导演

top10_directors = director_counts.head(10)

接着进行图表的绘制：

# 使用 plotly.express 绘制柱状图，以展示前 10 位导演的电影数量

# top10_directors 是包含前 10 位导演及其电影数量的 Series

# title 参数用于设置图表的标题

fig1 = px.bar(top10_directors, title='Movie Counts of the Top 10 Directors')

# 使用 plotly.express 绘制饼图，以展示前 10 位导演的电影数量

# names 参数指定图表的标签（这里是导演的名字），对应 top10_directors 的索引

# values 参数指定图表的值（这里是电影数量），对应 top10_directors 的值

# title 参数设置图表的标题

fig2 = px.pie(top10_directors, names=top10_directors.index, values=top10_directors.values, title='Movie Counts of the Top 10 Directors')

# 使用 plotly.express 绘制折线图，以展示前 10 位导演的电影数量

# top10_directors 是包含前 10 位导演及其电影数量的 Series

# title 参数用于设置图表的标题

fig3 = px.line(top10_directors, title='Movie Counts of the Top 10 Directors')

随后，创建 Dash 应用，并将三张图表添加进页面：

# 创建一个 Dash 应用的实例，并命名为 app

# 这个实例是整个应用的核心，管理应用的布局和交互逻辑

app = dash.Dash()

# 定义应用的布局，使用 Bootstrap 容器布局以保持响应式和美观

# dbc.Container 创建一个容器，用于包含页面内容

app.layout = dbc.Container([

    # 添加一个一级标题（<h1>），显示在页面顶部，表明图表的主题

    html.H1("Movie Counts of the Top 10 Directors"),



    # 使用 dcc.Graph 组件在页面中展示柱状图

    # figure 参数指定显示的图表对象，这里是 fig1 柱状图

    dcc.Graph(figure=fig1),

    # 使用 dcc.Graph 组件在页面中展示饼图

    # figure 参数指定显示的图表对象，这里是 fig2 饼图

    dcc.Graph(figure=fig2),

    # 使用 dcc.Graph 组件在页面中展示折线图

    # figure 参数指定显示的图表对象，这里是 fig3 折线图

    dcc.Graph(figure=fig3)

])

最后，运行应用，并查看结果。

# 检查当前脚本是否是作为主程序运行

# 当 Python 解释器运行一个脚本时，它会设置一个特殊变量 __name__，表示脚本的名称

# 如果当前脚本是被直接运行的（而不是被导入到其他脚本中），__name__ 的值将是 '__main__'

if __name__ == '__main__':



    # 启动 Dash 应用的服务器

    # app.run_server() 启动一个本地服务器，使应用可以在浏览器中访问

    # debug=True 表示开启调试模式。在调试模式下，如果代码出错，浏览器会显示详细的错误信息，帮助开发者快速定位问题

    app.run_server(debug=True)

经过上述步骤，我们完成了一个简单的基础仪表盘，效果如下所示：