动态调整 plotly.graph_objects 生成的图形的 Y 轴

Question

上图是使用以下代码创建的。

import plotly.graph_objects as go

candlestick = go.Candlestick(x=data.index,
                        open=data.open,
                        high=data.high,
                        low=data.low,
                        close=data.close,
                        increasing_line_color='red',
                        decreasing_line_color='green')
fig = go.Figure(data=[candlestick])
fig.show()    

生成图表后，我可以通过单击右上角的“放大”和“缩小”按钮来更改其 X 轴。

但是，我找不到任何方法来改变它的 Y 轴。 我的意思是，例如，我想将 Y 轴的最小值设置为 175，将 Y 轴的最大值设置为 177。

生成图表后是否可以动态更改 Y 轴的范围？

我知道我可以使用fig.update_yaxes(range=[175,177])来更新 Y 轴的范围。 但是运行这个命令需要我重新启动我的程序，这很不方便。

Answer 1

该图可以使用fig.update_*进行更新。 我将用官方参考中的一个例子来回答，其中 y 轴受到限制。

import plotly.graph_objects as go
import pandas as pd
from datetime import datetime

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = go.Figure(data=[go.Candlestick(x=df['Date'],
                open=df['AAPL.Open'],
                high=df['AAPL.High'],
                low=df['AAPL.Low'],
                close=df['AAPL.Close'])])

fig.update_yaxes(range=[100,120])
fig.show()

没有 y 轴限制的示例

Answer 2

我根据此文档创建了以下解决方案。

from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import plotly.graph_objects as go

candlestick = go.Candlestick(x=data.index,
                        open=data.open,
                        high=data.high,
                        low=data.low,
                        close=data.close,
                        increasing_line_color='red',
                        decreasing_line_color='green')
fig = go.Figure(data=[candlestick])

def get_start_end_range(rng):
    if rng:
        if "xaxis.range" in rng.keys():
            return rng['xaxis.range'][0], rng['xaxis.range'][1]
        if 'xaxis.range[0]' in rng.keys():
            return rng['xaxis.range[0]'], rng['xaxis.range[1]']
    return None, None

app = Dash(__name__)
app.layout = html.Div(children=[
    html.H1(children='Signals Graph'),
    dcc.Graph(
        id='signals-graph',
        figure=fig
    )
])

# Use callback to dynamically adjust the scale of Y axis 
@app.callback(
    Output(component_id="signals-graph", component_property="figure"),
    Input(component_id="signals-graph", component_property="relayoutData"),
)                
def scaleYaxis(rng):
    print(f"rng: {rng}")
    xstart, xend = get_start_end_range(rng)
    if xstart != None:
        try:
            range_data = data.loc[
                xstart : xend,
                ["high", "low", "open", "close"],
            ]
            if len(range_data) > 0:
                fig["layout"]["yaxis"]["range"] = [range_data['low'].min()*0.95, range_data['high'].max()*1.05]
        except Exception as e:
            print(f"Something wrong occured: {e}")
        finally:
            print(f"update x axis: {[xstart, xend]}")
            fig["layout"]["xaxis"]["range"] = [xstart, xend]
    return fig
app.run_server()

上面的解决方案使用回调来动态调整 Y 轴的比例。

上面的代码将在127.0.0.1创建一个监听 8050 端口的服务器。

您可以访问http://127.0.0.1:8050查看此图。