python - 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
问题
这可能吗?
解决方案
可以通过在不同的轴上绘制不同的轨迹来完成。例如,您可以使用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()
推荐阅读
- emacs - 如何在 Unix 中通过单击光标进行导航?
- c# - Visual Studio - 为同名的程序集构建不同的版本
- hapi - 什么类型的 FHIR 资源记录干预
- http - 基于golang中的字节长度拆分字符串
- variables - Dart 中的动态类型是否较慢?
- javascript - TypeScript 错误:重复的标识符“LibraryManagedAttributes”
- android - 预期为 BEGIN_ARRAY,但在第 1 行第 2 列路径 $ 处为 BEGIN_OBJECT 并进行了改造
- html - 试图在 html.but css not working.pls 上应用桌面 css 和移动 css
- azure-devops - Azure DevOps、YAML 发布管道?
- css - 使用revealjs更改Rmarkdown演示文稿中的字体大小