Блог

Контекст

Создание веб-приложения и использование 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
 

Проблема

Возможно ли это?

Это можно сделать, построив разные трассы на разных осях. Например, вы можете построить диаграмму области, используя оси x и y , где 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()