python - Plotly:有没有办法让日期 slider 成为面积图而不是折线图？

Question

上下文
创建一个 Web 应用程序并使用 Plotly 绘制图形。我创建了日期 slider ，但希望它是一个面积图而不是折线图。主图很好，这不会改变。但是随着越来越多的线条被添加，它会添加到 slider 中并且不会使它看起来很漂亮。因此，我想将折线图(主图)下方的日期 slider 固定为面积图，但将主图保持为折线图。已查看文档，但没有看到任何有关此效果的内容。

代码:

 plotly_fig = px.line(data_frame=dataframe_cols1,x=dataframe_cols1.index,y=Columns_select1)
                            #width=780, height=830) # Get data from the dataframe with selected columns, choose the x axis as the index of the dataframe, y axis is the data that will be multiselected
        
        # Legend settings
        plotly_fig.update_layout(showlegend=True)        
        plotly_fig.update_layout(margin_autoexpand=True) # prevent size from changing because of legend or anything
        plotly_fig.update_traces(mode="lines", hovertemplate=None)
        plotly_fig.update_layout(hovermode="x unified")
                
        plotly_fig.update_layout(legend=dict(
                          orientation = "h",
                          yanchor="bottom",
                          y=-.85,
                          xanchor="right",
                          x=1.0
                        )) 
        
        
        height = 800
        plotly_fig.update_layout(
        autosize=False,
        width=870,
        height=height)
        
        # Date range
        plotly_fig.update_xaxes(rangeslider_visible=True,
                                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")
                                    ])))



     st.plotly_chart(plotly_fig,use_container_width=True) # streamlit show graph

问题
这可能吗？

Answer 1

可以通过在不同的轴上绘制不同的轨迹来完成。例如，您可以使用 x 绘制面积图。和 y轴，其中 x有一个日期 slider 。然后您可以使用 x2 绘制折线图。和 y2轴，在本例中为 x2没有日期 slider 。有关示例，请参见下面的代码。

import plotly.graph_objects as go
import numpy as np
import pandas as pd

df = pd.DataFrame({'timestamps': pd.date_range(start=pd.Timestamp('2020-01-01'), periods=100, freq='D'),
                   'series_1': np.cos(4 * np.pi * np.linspace(0, 1, 100)),
                   'series_2': np.linspace(0, 1, 100),
                   'series_3': np.linspace(0.5, 1.5, 100)})

data = []

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_1'],
                       name='series_1',
                       xaxis='x',
                       yaxis='y',
                       mode='lines',
                       fill='tozeroy',
                       line=dict(color='gray')))

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_2'],
                       name='series_2',
                       xaxis='x2',
                       yaxis='y2',
                       mode='lines',
                       line=dict(color='green')))

data.append(go.Scatter(x=df['timestamps'],
                       y=df['series_3'],
                       name='series_3',
                       xaxis='x2',
                       yaxis='y2',
                       mode='lines',
                       line=dict(color='purple')))

layout = dict(plot_bgcolor='white',
              paper_bgcolor='white',
              margin=dict(t=30, l=30, r=30, b=30),
              yaxis2=dict(color='gray',
                          linecolor='gray',
                          showgrid=False,
                          mirror=True),
              xaxis2=dict(type='date',
                          overlaying='x',
                          matches='x',
                          visible=False),
              yaxis=dict(visible=False),
              xaxis=dict(type='date',
                         color='gray',
                         linecolor='gray',
                         showgrid=False,
                         mirror=True,
                         rangeselector=dict(
                               buttons=list([
                                   dict(count=1,
                                        label='1d',
                                        step='day',
                                        stepmode='backward'),
                                   dict(count=7,
                                        label='1w',
                                        step='day',
                                        stepmode='backward'),
                                   dict(count=1,
                                        label='1m',
                                        step='month',
                                        stepmode='backward')])),
                         rangeslider=dict(visible=True, bordercolor='gray')))

fig = go.Figure(data=data, layout=layout)

fig.show()