如何使用 Plotly 创建垂直滚动条？

Posted 2023-02-18

【中文标题】如何使用 Plotly 创建垂直滚动条？

【英文标题】：How to create a vertical scroll bar with Plotly?

【发布时间】：2020-11-26 21:22:47

【问题描述】：

我想在 Plotly 中为折线图创建垂直滚动。为了可视化，垂直滚动如下图所示。

假设我们有如下 6 个折线图，那么如何在画布上创建一个垂直滚动条

import plotly.graph_objects as go
import plotly.io as pio
from plotly.subplots import make_subplots
import pandas as pd

# data
pio.templates.default = "plotly_white"
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
df = df.set_index('Date')
df.tail()
cols = df.columns[:-4]
ncols = len(cols)

# subplot setup
fig = make_subplots(rows=ncols, cols=1, shared_xaxes=True)

for i, col in enumerate(cols, start=1):
    fig.add_trace(go.Scatter(x=df[col].index, y=df[col].values), row=i, col=1)

fig.show()

感谢您提供任何提示或良好的阅读材料。

【问题讨论】：

显然你可以用dash来做到这一点。

【参考方案1】：

我使用 plotly-dash 制作了一个单页 Web 应用程序。在这个仪表板中，我想创建一个垂直条形图，它的侧面也有一个滚动条。 我导入了以下依赖项：

from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash
import dash_table
import plotly.graph_objs as go
import pandas as pd

在 app.layout 中，我在包含我的 dcc.graph 组件的 html.Div 中提供了 css 样式参数：-

dcc.Graph(
            id='doctors',
            figure=
        ),style="maxHeight": "400px", "overflow": "scroll")
        ], width='size': 6)

稍后在@app 回调中，我为垂直条形图指定了高度：-

fig.update_layout(height = (30*len(all_by_doctor)), title_text='Total bookings 
by  doctors'.format(len(all_by_doctor)),plot_bgcolor='#ffffff')