Артефакт визуализации Plotly рисует диаграммы с областями

Артефакт визуализации Plotly рисует диаграммы с областями

В этой статье рассказывается, как использовать Plotly для рисования диаграмм с областями, в основном на основе двух методов:

• На основе реализации plotly_express
• На основе реализации plotly.graph_objects

Расширенное чтение

Статьи Plotly образуют последовательную серию. Первые девять статей о визуализации Plotly:

• Прохладный! 36 картинок влюбляются в продвинутый артефакт визуализации Plotly_Express
• Играйте с точечными диаграммами с помощью Plotly
• Сюжетные игры с круговыми диаграммами
• Сюжетное развлечение с воронкообразными диаграммами
• Сюжетные игры с гистограммами
• Сюжетные игры с пузырьковыми диаграммами
• Сюжетные игры с биржевыми диаграммами
• Играйте с диаграммами Ганта с помощью Plotly
• Сюжетные пьесы с коробочными сюжетами

библиотека импорта

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

Реализация на базе px

px.area creates a stacked area plot. Each filled area corresponds to one value of the column given by the line_group parameter.

px.area реализует диаграмму с областями с накоплением. Каждая заполняемая часть определяется заданным параметром line_group, в следующем случае используется встроенный набор данных gdp:

# 以GDP数据说明

gdp = px.data.gapminder()
gdp.head()

fig = px.area(
    gdp,   # 待绘图数据
    x='year',  # 指定x\y轴和颜色，以及线性组别
    y='pop',
    color='continent',
    line_group="country"  # 关键参数
    )

fig.show()

Реализация на основе go

диаграмма базовой области

import plotly.graph_objects as go

fig = go.Figure()

# 7种填充方式：['none', 'tozeroy', 'tozerox', 'tonexty', 'tonextx','toself', 'tonext']

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[13, 15, 21, 27], 
    fill='toself',
    name='toself'
    )) 

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[13, 15, 21, 27], 
    fill='tonexty',
    name='tonexty'
    ))

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[13, 15, 21, 27], 
    fill='tozerox',
    name='tozerox'  # 紧贴着Y轴填充
    ))

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[13, 15, 21, 27], 
    fill='tozeroy',
    name='tozeroy'  # 紧贴着x轴填充
    ))

fig.show()

Графическое отображение различных методов наполнения:

краевая задача

Иногда нам нужно удалить отображение границы, используя параметр режима, метод использования;

• Комбинации между линиями, маркерами и текстом
• Используйте none, что означает, что граница не отображается.

# 如何取消边界线：加上参数mode='none'

import plotly.graph_objects as go

fig = go.Figure()

# 7种填充方式：['none', 'tozeroy', 'tozerox', 'tonexty', 'tonextx','toself', 'tonext']

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[13, 15, 21, 27], 
    fill='tonext',
    mode='none',   # 参数：['lines', 'markers', 'text']的组合，或者none
    name='tonext'
    )) 

fig.show()

Диаграмма внутренней области заполнения

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4], 
    y=[3, 4, 8, 3],
    fill=None,
    mode='lines',
    line_color='red',  # trace0
))

fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[1, 6, 2, 6],
    fill='tonexty', 
    mode='lines',  
    line_color='indigo'))  # trace1

fig.show()

Диаграмма с накоплением областей

Отображение данных путем стекирования данных

import plotly.graph_objects as go

x = ["小明","小红","小周","小孙"]

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=x,
    y=[100,120,110,108],  # 语文
    hoverinfo = 'x+y',  # 悬停显示的信息
    mode='lines',
    line=dict(width=0.5,color='rgb(121,90,200)'),
    stackgroup='one'   # 默认是堆叠分组统计
))

fig.add_trace(go.Scatter(
    x=x,
    y=[130,100,80,140],  # 数学
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(121,231,219)'),
    stackgroup='one'   # 
))

fig.add_trace(go.Scatter(
    x=x,
    y=[98,120,149,91],  # 英语
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(191,249,230)'),
    stackgroup='one'   
))

# fig.update_layout(yaxis_range=(0, 100))
fig.show()

Нормализованная диаграмма с накоплением областей

Указывает процент, занимаемый каждым графом

import plotly.graph_objects as go

x = ["小明","小红","小周","小孙"]

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=x,
    y=[30,20,40,30],  # 语文
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(11,90,200)'),
    stackgroup='one',   
    groupnorm='percent'   # 重点参数：分组归一化，选择百分比
))

fig.add_trace(go.Scatter(
    x=x,
    y=[50,60,80,70],  # 数学
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(121,231,219)'),
    stackgroup='one'   # 默认是堆叠分组统计
))

fig.add_trace(go.Scatter(
    x=x,
    y=[80,90,90,75],  # 英语
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(191,249,230)'),
    stackgroup='one'   
))

fig.add_trace(go.Scatter(
    x=x,
    y=[100,100,100,200],  # 英语
    hoverinfo = 'x+y',
    mode='lines',
    line=dict(width=0.5,color='rgb(111,90,241)'),
    stackgroup='one'   
))

fig.update_layout(
    showlegend=True, # 是否显示图例，默认是显示的
#     xaxis_type='category',
    yaxis=dict(
    type='linear',
    range=[1, 100],  # y轴范围
    ticksuffix='%'))  # 标记后缀

fig.show()

выбрать информацию при наведении

Это означает, что когда диаграмма с областями заполнена, мы можем выбрать данные, отображаемые при наведении курсора; наведение означает: данные, которые будут отображаться при наведении на них курсора. В следующем примере есть две схемы отображения:

• Отображаются как отступы, так и точки данных
• Показывать только при наведении на точки данных

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[0,0.5,1,1.5,2],   # 绘图数据
    y=[0,1,2,1,0],
    fill='toself',   # 填充方式和颜色
    fillcolor='darkviolet',  
    hoveron = 'points+fills',   # 悬停位置：点和内部填充部分都悬停显示
    line_color='red',  # 线色
    text="Points + Fills",  # 文本显示
    hoverinfo = 'text+x+y'  # 指定悬停信息
))

fig.add_trace(go.Scatter(
    x=[3,3.5,4,4.5,5], 
    y=[0,1,2,1,0],
    fill='toself', 
    fillcolor = 'violet',
    hoveron='points',   #  只在点上悬停
    line_color='violet',
    text="Points only",    # 只显示点
    hoverinfo='text+x+y'
))

fig.update_layout(
    title = "hover on <i>points</i> or <i>fill</i>",  # 通过HTML标签语法的格式来生成标题
    xaxis_range = [0,5.2],  # 两个轴的数据范围
    yaxis_range = [0,3]
)

#fig.show()