Python Plotly：使用下拉菜单创建一个 plotly HISTOGRAM 图并将其放入 html

Question

目标：创建一个带有下拉菜单的情节直方图并将其放入 html 中。 html 将有多种不同类型的图表（本问题中未提及）。

我实际上有一个包含许多列的大型数据框/csv； 但是对于这个问题，我正在考虑一个非常简单的 csv/dataframe。 csv/dataframe 包含三列 - HOST、REQUEST、INCIDENT。 下面是示例 csv。

HOST,REQUEST,INCIDENT
host1,GET,error
host1,GET,warning
host1,GET,warning
host1,POST,warning
host1,POST,error
host1,POST,warning
host2,GET,warning
host2,GET,error
host2,GET,warning
host2,POST,error
host2,POST,warning
host2,POST,error
host3,GET,error
host3,GET,error
host3,GET,error
host3,POST,error
host3,POST,error
host3,POST,warning
host4,GET,warning
host4,GET,error
host4,GET,error
host4,POST,error
host4,POST,warning
host4,POST,warning

目前，我正在为每个主机的“请求与事件”绘制单独的直方图，然后从中创建一个 html。 意味着如果有四个不同的主机，那么我将在我的 html 中绘制四个不同的 HISTOGRAM 图。 下面是我的代码。

import pandas as pd
import plotly.express as px

print(f"START")
df = pd.read_csv("dropdown.csv")
hosts = list(df['HOST'].unique())
print(hosts)
for host in hosts:
    title = "Dropdown grap for host = " + host
    df1 = df.loc[(df['HOST'] == host)]
    graph = px.histogram(df1, x='REQUEST', color='INCIDENT', title=title)
    with open("dropdown.html", 'a') as f:
        f.write(graph.to_html(full_html=False, include_plotlyjs=True))
print(f"END")

下面是我的输出 html 有四个图表

但我的目标是在我的输出 html 中绘制一个 HISTOGRAM 图，其中 HOST 是 dropdown 。 我应该能够从下拉列表中选择不同的主机来获取每个主机的图表。 使用 plotly express 我没有任何选择来实现我所需的输出。 需要帮助。 特别是如果我可以使用 plotly.express 本身来实现这一点，那就太好了！ 也欢迎其他选择。

Answer 1

您可以遍历所有可能的主机，并使用fig = px.histogram(df_subset_by_host, x='REQUEST', color='INCIDENT')创建相应的 fig，然后提取存储在fig._data对象中的 x 数组数据，然后将此数据分配给每个主机选择按钮的“x”arg。

例如：

from io import StringIO
import pandas as pd
import plotly.express as px

data_str = StringIO("""HOST,REQUEST,INCIDENT
host1,GET,error
host1,GET,warning
host1,GET,warning
host1,POST,warning
host1,POST,error
host1,POST,warning
host2,GET,warning
host2,GET,error
host2,GET,warning
host2,POST,error
host2,POST,warning
host2,POST,error
host3,GET,error
host3,GET,error
host3,GET,error
host3,POST,error
host3,POST,error
host3,POST,warning
host4,GET,warning
host4,GET,error
host4,GET,error
host4,POST,error
host4,POST,warning
host4,POST,warning""")

df = pd.read_csv(data_str)

hosts = list(df['HOST'].unique())
host_default = "host1"
title = f"Dropdown grap for host = {host_default}"

fig = px.histogram(df.loc[df['HOST'] == host_default], x='REQUEST', color='INCIDENT', title=title)

buttons = []
for host in hosts:
    df_host = df.loc[(df['HOST'] == host)]
    fig_host = px.histogram(df_host, x='REQUEST', color='INCIDENT')
    buttons.append(
        dict(
            label=host,
            method="update",
            args=[
                {
                    "x": [trace['x'] for trace in fig_host._data],
                    "title": f"Dropdown group for host {host}"
                }
            ]
        )
    )

fig.update_layout(
    updatemenus=[
        dict(
            type="dropdown",
            direction="down",
            showactive=True,
            buttons=buttons
        )
    ]
)

fig.show()