Plotly：如何在Plotly express图表中添加横向滚动条？

Question

我开始学习plotly和pandas，我有一个多变量时间序列要使用plotly.express的功能进行绘图并进行交互。我还希望我的图表具有水平滚动条，以便初始绘图是在预先指定的时间间隔内进行的。以下是我的示例，包括三个时间序列和100K时间点：

import plotly.express as px
import numpy as np
import pandas as pd

np.random.seed(123)
e = np.random.randn(100000,3)  
df=pd.DataFrame(e, columns=['a','b','c'])

df['x'] = df.index
df_melt = pd.melt(df, id_vars="x", value_vars=df.columns[:-1])
fig=px.line(df_melt, x="x", y="value",color="variable")
fig.show()

为了我的最终目的，时间序列将更大-可能是900K+时间点中的40到70个时间序列。

这将创建一个图形，在该图形上可以使用plotly.express功能进行交互，例如缩放、平移、矩形选择等。

是否有一种方法可以增强它，使得初始图仅显示前500个时间点，并且滚动条允许我调查随着时间增加发生了什么？

使用Mac OS 10.15.4和Python 3.7及IDLE。我希望在IDLE中创建此程序，而不是在Jupyter笔记本环境中。

- fishbacp

---

非常好 - 非常感谢。对于我的系列，时间点的数量非常大（~900K），通常有40-70个系列。我认为在我的Web浏览器中创建图形所需的时间实际上只是我的计算机的功能，除了下采样/降采样之外，我无法加快该过程的速度？ - fishbacp

@hfshbacp 很高兴能帮忙！您是否考虑将我的建议标记为被接受的答案？关于时间和速度，请考虑发布一个单独的问题。我也很想看到关于这个问题的答案。 - vestland

Answer 1

最简单的方法是将以下内容添加到您的设置中：

fig.update_layout(xaxis=dict(rangeslider=dict(visible=True),
                             type="linear"))

您将获得以下内容：

这将使您能够对原始图形进行子集和平移操作：

完整代码：

import plotly.express as px
import numpy as np
import pandas as pd

np.random.seed(123)
e = np.random.randn(100000,3)  
df=pd.DataFrame(e, columns=['a','b','c'])

df['x'] = df.index
df_melt = pd.melt(df, id_vars="x", value_vars=df.columns[:-1])
fig=px.line(df_melt, x="x", y="value",color="variable")

# Add range slider
fig.update_layout(xaxis=dict(rangeslider=dict(visible=True),
                             type="linear")
)

fig.show()

- vestland

---

有没有设置滑块初始宽度的方法？默认情况下，它覆盖整个绘图区域，我只能找到一种使用按钮为日期定向的绘图设置宽度的方法。 - Sharat

Answer 2

使用plotly.graphing_objects离线使用plotly

您也可以按照以下方式使用plotly.graphing_objects。

引用来自官方文档的以下示例。

import plotly.graph_objects as go

import pandas as pd

# Load data
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)))

# Set title
fig.update_layout(
    title_text="Time series with range slider and selectors"
)

# Add range slider
fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label="1m",
                     step="month",
                     stepmode="backward"),
                dict(count=6,
                     label="6m",
                     step="month",
                     stepmode="backward"),
                dict(count=1,
                     label="YTD",
                     step="year",
                     stepmode="todate"),
                dict(count=1,
                     label="1y",
                     step="year",
                     stepmode="backward"),
                dict(step="all")
            ])
        ),
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
)

fig.show()

- CypherX

---

也许我当时弄错了。我以为 plotly.express 需要 API 访问权限。我稍后会再次检查并更新说明。谢谢。 - CypherX

没问题！也许可以先看一下px.express。你会发现那里最重要的一点是，express 在处理长数据方面效果非常好，而 graphobjects 则更适用于宽格式的数据，其中在一列中有唯一值类别。实际上，昨天我在 这篇帖子 的回答中写了一小段关于这个问题的内容。 - vestland

顺便说一句，我必须说我真的很喜欢你在这里的回答（https://dev59.com/dlIH5IYBdhLWcg3wA3x5#61693190）。直到我看到那个，我才知道字典展平的概念。 - vestland

@vestland 谢谢您分享资源。 :) - CypherX

@vestland 这里有另一个宝石：plotly/jupyter-dash。 - CypherX