首页 > 解决方案 > Plotly:有没有办法让日期滑块成为面积图而不是折线图?

问题描述

语境

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

图形

代码:

 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

问题

这可能吗?

标签: pythonplotlydata-visualizationplotly-python

解决方案


可以通过在不同的轴上绘制不同的轨迹来完成。例如,您可以使用xy轴绘制面积图,其中x有一个日期滑块。x2然后,您可以使用和轴绘制折线图y2,​​在这种情况下x2没有日期滑块。有关示例,请参见下面的代码。

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

在此处输入图像描述


推荐阅读