首页 > 解决方案 > 绘图中的双滑块

问题描述

我正在尝试在一个图中实现两个滑块我尝试了以下

# Create figure
fig = go.Figure()

# Add traces, one for each slider step
for step in np.arange(1, 5, 1):
    fig.add_trace(
        go.Scatter(
            visible=False,
            line=dict(color="#00CED1", width=6),
            name=" = " + str(step),
            x=np.arange(0, 10, 0.01),
            y=[step]*50))

# Make 10th trace visible
fig.data[1].visible = True

# Create and add slider
sliders = []

for j in range(int(len(fig.data)/2)):
    steps=[]
    for i in range(int(len(fig.data)/2)):
        step = dict(
            method="update",
            args=[{"visible": [False] * (int(len(fig.data)/2))},
                  {"title": "Slider switched to step: " + str(i)}],  # layout attribute
        )
        step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
        steps.append(step)
    sliders.append(dict(active=0, currentvalue={"prefix": "slider: "}, pad={"t": (80 * j + 20)}, steps=steps))

fig.update_layout(sliders=sliders)



plotly.offline.plot(fig, filename=f'test.html')

两个滑块不能一起工作,在本例中,每个滑块都有两个选项。但是如果第一个处于一个位置,移动第二个似乎并不知道第一个状态是什么。有什么建议么?

标签: pythonsliderplotly

解决方案


您可以在破折号中使用 dcc 滑块。下面的代码显示了两个滑块,它们控制两个不同的 pi 图表,其函数(指标)读取幻灯片输出并输出两个百分比。为了使这项工作发挥作用,请将度量函数替换为在给定两个输入的情况下生成两个百分比的函数。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
from plotly.subplots import make_subplots
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("par 1:"),
    dcc.Slider(0, 1, 0.1,
               value=0.5,
               id='names'
    ),
    html.P("par 2:"),
    dcc.Slider(0, 1, 0.1,
               value=0.5,
               id='values'
    ),
    dcc.Graph(id="pie-chart"),
])

@app.callback(
    Output("pie-chart", "figure"), 
    [Input("names", "value"), 
     Input("values", "value")])
def generate_chart(names, values):
    fig = make_subplots(rows=1, cols=2, specs=[[{"type": "pie"}, {"type": "pie"}]])
    fig.add_trace(go.Pie(
        values=[metrics(values,names)[0], (100-(metrics(values,names)[0]))],
        domain=dict(x=[0, 0.5]),
        name="Recall"), 
        row=1, col=1)

    fig.add_trace(go.Pie(
        values=[metrics(values,names)[1], (100-(metrics(values,names)[1]))],
        domain=dict(x=[0.5, 1.0]),
        name="Precision"),
        row=1, col=2)

    return fig

app.run_server(debug=True)

推荐阅读