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

Question

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

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

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()

感谢您提供任何提示或好的阅读 Material 。

Answer 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')