Plotly中圖底部所有子圖的trace值顯示

Question

我正在使用 plotly 進行數據可視化。

我使用make_subplots生成了 plot 的 3 條軌跡，它們共享 x 軸。 我需要將鼠標懸停在 x 軸的某處，以在圖的底部顯示所有跡線的相應 y 值。

下面是生成子圖的代碼。

import plotly
import plotly.graph_objs as go
import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots

import pandas as pd
import re

df = pd.read_csv("finance-charts-apple.csv")

fig = make_subplots(
    rows=3, cols=1,
    shared_xaxes=True,
    vertical_spacing=0.0,
    horizontal_spacing = 0.0,
    specs=[[{"type": "scatter"}],
           [{"type": "scatter"}],
           [{"type": "scatter"}]])
    
fig.add_trace(
    go.Scattergl(
        x=df.Date,
        y=df['AAPL.High'],
        mode="lines",
        name="AAPL_high"
    ),
    row=1, col=1
)    

fig.add_trace(
    go.Scattergl(
        x=df.Date,
        y=df['AAPL.Low'],
        mode="lines",
        name="AAPL_low"
    ),
    row=2, col=1
)    

fig.add_trace(
    go.Scattergl(
        x=df.Date,
        y=df['AAPL.Close'],
        mode="lines",
        name="AAPL_Close"
    ),
    row=3, col=1
) 

fig.update_layout(
    height=800,
    showlegend=True,
    title_text="Apple market share",
    hovermode= 'x unified',
    hoverinfo= "x+y",
    spikedistance= -1,
    xaxis = dict(
            showspikes = True,
            spikemode = 'across + toaxis',
            spikesnap = 'cursor',
            showline= True,
            showgrid = True,
            spikedash = 'solid'))

fig.update_xaxes(matches='x')
fig.update_traces(xaxis='x1')
fig.show()
plotly.offline.plot(fig)

按照上面的代碼，我能夠 plot 3 個子圖，在所有子圖中垂直 hover。

我想知道的是，有沒有什么方法可以在圖的底部顯示每個軌跡的特定 x 值的 y 值，如下圖所示？

Answer 1

我正在為我的 Dash 應用程序搜索類似的東西，最終將hoverData從dcc.Graph傳遞到回調 function，該回調在單獨的 div 中顯示值。

import pandas as pd
import dash
from jupyter_dash import JupyterDash
from dash import dcc
from dash import html
from plotly.subplots import make_subplots
import plotly.graph_objects as go


df = pd.read_pickle("freq_simulation_22_03_2022.pkl")

app = JupyterDash(__name__)

server = app.server

## Setup fig
fig = make_subplots(
    rows=3,
    cols=1,
    shared_xaxes=True,
    vertical_spacing=0.01,
    x_title="DDS Frequency [Hz]",
)

## Add the 3 subplots
fig.add_trace(
    go.Scatter(x=df.index, y=df["best_factor"], mode="markers", name="best_factor"),
    row=1,
    col=1,
)

fig.add_trace(
    go.Scatter(x=df.index, y=df["best_divider"], mode="markers", name="best_divider"),
    row=2,
    col=1,
)

fig.add_trace(
    go.Scatter(x=df.index, y=df["error"], mode="markers", name="error"), row=3, col=1
)

fig["layout"]["yaxis1"]["title"] = "Best Undersampling Factor"
fig["layout"]["yaxis2"]["title"] = "Best ADC Divider"
fig["layout"]["yaxis3"]["title"] = "Frequency Error [Hz]"


fig.update_layout(
    height=900,
    title_text="Best Undersampling Factor with remaining Frequency Error over DDS Frequency",
    hovermode="x unified",
    spikedistance=-1,
)
fig.update_xaxes(matches="x2")
fig.update_traces(xaxis="x3")

app.layout = html.Div(
    [
        dcc.Graph(id="testgraph", figure=fig),
        html.Div(
            id="my-output",
            style={
                "font-family": "Helvetica",
                "fontSize": 20,
                "position": "absolute",
                "top": "10vmax",
                "right": "0vmax",
                "white-space": "pre-wrap",
            },
        ),
    ],
    style={"position": "relative"},
)


@app.callback(
    dash.dependencies.Output("my-output", "children"),
    [dash.dependencies.Input("testgraph", "hoverData")],
)
def update_graph(hoverData):
    if not hoverData:
        hoverfreq = df.index[0]
    else:
        hoverfreq = hoverData["points"][0]["x"]
    hover_factor = df["best_factor"][hoverfreq]
    hover_divider = df["best_divider"][hoverfreq]
    hover_error = df["error"][hoverfreq]
    return f"Freq: {hoverfreq}Hz\n -> Factor: {hover_factor}\n -> Divider: {hover_divider}\n -> Error: {hover_error:1.6f}Hz"


app.run_server(port=8010, height=1000)

Answer 2

截至 2020 年 7 月 21 日，尚未為 plotly 子圖 (v4.4.x) 實施統一hovermodes模式。

在他們的 js 存儲庫中，這個特性存在一個未解決的問題，但它是對所有發行版的有效請求。 您可以在https://github.com/plotly/plotly.js/issues/4755訂閱它。