目录

1. 面积图构成

2. 面积图类型

3. 面积图适用场景

4. 面积图局限性

5. 面积图代码实现

5.1 Python 代码

5.2 面积图效果（网页展示）

1. 面积图构成

        面积图（Area Chart），又称区域图，是在折线图的基础上发展而来的。它将折线图中折线与自变量坐标轴（通常是X轴）之间的区域使用颜色或纹理进行填充，形成一个可以更好突出趋势信息的填充区域，即“面积”，适合展示数据的趋势和累积变化。

        面积图一般由以下几部分构成。

• 轴：通常表示时间或分类变量。
• Y轴：表示数值变量，反映数据的大小。
• 面积填充：在折线图的基础上填充颜色，形成一个“面积”，代表该数值的累计大小。
• 颜色区分：当存在多个数据系列时，不同的颜色表示不同的系列。

2. 面积图类型

        面积图有多种类型，主要包括：

1. 一般面积图：所有的数据都从相同的零轴开始，用于展示数据随时间或类别的变化趋势。
2. 堆叠面积图（Stacked Area Chart）：每个数据集的起点不同，都是基于前一个数据集。用于显示每个数值所占大小随时间或类别变化的趋势线，在表现大数据的总量分量的变化情况时格外有用。
3. 百分比堆叠面积图（Percent Stacked Area Chart）：将各数据系列的值归一化为100%，展示每个数值所占百分比随时间或类别变化的趋势线，可以强调每个系列的比例趋势线。

        此外，根据呈现方式的不同，面积图还可以分为二维面积图和三维面积图。

3. 面积图适用场景

        面积图在数据分析中广泛应用于以下场景：

1. 时间或者类别趋势分析：面积图能够清晰地展示数据随时间或类别的变化趋势，便于观察数据的波动和周期性规律。
2. 累积总量与分量分析：堆叠面积图和百分比堆叠面积图能够直观地展示数据的总量和分量之间的关系，有助于分析各个分量对总量的贡献程度。
3. 不同类别对比分析：通过不同颜色或纹理的填充区域，面积图可以方便地对比不同数据集之间的差异和相似之处。

4. 面积图局限性

1. 细节易被掩盖：堆叠面积图中，下方系列可能掩盖上方系列的变化。
2. 类别限制：如果数据系列过多，会导致图表杂乱难以阅读。
3. 难以精确比较：面积图更适合展示大趋势，而不是细节对比。

5. 面积图代码实现

5.1 Python 代码

import dash
from dash import html, dcc, Input, Output
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
import numpy as np

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


def create_area_chart():
    """
    创建演示用的各种基本图表
    返回一个包含多个图表的列表
    """
    # 创建示例数据
    x = np.linspace(0, 10, 100)
    y1 = np.sin(x) + 2
    y2 = np.cos(x) + 1

    # 1. 面积图
    area_fig = go.Figure()
    area_fig.add_trace(go.Scatter(
        x=x,
        y=y1,
        fill='tozeroy',
        name='sin(x) + 2'
    ))
    area_fig.add_trace(go.Scatter(
        x=x,
        y=y2,
        fill='tozeroy',
        name='cos(x) + 1'
    ))
    area_fig.update_layout(
        title='面积图示例',
        xaxis_title='X轴',
        yaxis_title='Y轴',
        template='plotly_white'
    )

    # 2. 堆积面积图
    stacked_area_fig = go.Figure()
    stacked_area_fig.add_trace(go.Scatter(
        x=x,
        y=y1,
        fill='tonexty',
        name='sin(x) + 2'
    ))
    stacked_area_fig.add_trace(go.Scatter(
        x=x,
        y=y1 + y2,
        fill='tonexty',
        name='cos(x) + 1'
    ))
    stacked_area_fig.update_layout(
        title='堆积面积图示例',
        xaxis_title='X轴',
        yaxis_title='Y轴',
        template='plotly_white'
    )

    # 3. 百分比堆叠面积图
    total = y1 + y2
    percent_stacked_area_fig = go.Figure()
    percent_stacked_area_fig.add_trace(go.Scatter(
        x=x,
        y=y1 / total,
        fill='tonexty',
        name='sin(x) + 2'
    ))
    percent_stacked_area_fig.add_trace(go.Scatter(
        x=x,
        y=y2 / total,
        fill='tonexty',
        name='cos(x) + 1'
    ))
    percent_stacked_area_fig.update_layout(
        title='百分比堆叠面积图示例',
        xaxis_title='X轴',
        yaxis_title='百分比',
        template='plotly_white'
    )

    return area_fig, stacked_area_fig, percent_stacked_area_fig

app.layout = html.Div([
    # 图表展示区域
    html.Div([
        html.H3("数据可视化展示--面积图", className="text-center mt-4 mb-3"),
        dbc.Row([
            dbc.Col(dcc.Graph(figure=create_area_chart()[0]), width=4),
            dbc.Col(dcc.Graph(figure=create_area_chart()[1]), width=4),
            dbc.Col(dcc.Graph(figure=create_area_chart()[2]), width=4)
        ], className="mb-4"),
    ], style={"backgroundColor": "#f0fff4", "padding": "20px", "borderRadius": "10px"}),
    
    
], style={"padding": "20px"})

if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

5.2 面积图效果（网页展示）