破折号：散点图的多个范围

Question

我是 Dash 的新手，我运行遇到了一些问题，试图根据范围滑块的 ranges/values 设置可视化过滤器。我在下面附上了我正在使用的代码块，但我似乎无法开始工作。我查看了文档，但不知道这个问题是出在 RangeSliders 上，还是我试图通过 "and" 命令过滤数据框的方式。

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd
import plotly
import plotly.graph_objs as go


#Define Dash App
app=dash.Dash()

df =  pd.DataFrame({
    'Range1': [1, 2, 3, 4, 5, 6],
    'Range2': [6, 7, 8, 9, 10, 11],
})


app.layout = html.Div([
    html.Div([
        html.H2('Sliders'),

        html.H4('Range1'),
        dcc.RangeSlider(
                        id='rangeslider_range1',
                        min=df['Range1'].min(),
                        max=df['Range1'].max(),
                        marks={str(range1): str(range1) for range1 in df['Range1'].unique()},
                        value = [df['Range1'].min(),df['Range1'].max()]
                        ),

        html.H4('Range2'),
        dcc.RangeSlider(
                        id='rangeslider_range2',
                        min=df['Range2'].min(),
                        max=df['Range2'].max(),
                        marks={str(range2): str(range2) for range2 in df['Range2'].unique()},
                        value = [df['Range2'].min(),df['Range2'].max()]
                        ),


        ],style={'width': '30%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(id='graph_test'),
        ],
        style={'width': '60%', 'display': 'inline-block', 'float': 'right'})
    ]
)

@app.callback(
     dash.dependencies.Output('graph_test', 'figure'),
    [dash.dependencies.Input('rangeslider_range1', 'value'),
     dash.dependencies.Input('rangeslider_range2', 'value')#,

     ])

def update_graph(
                 rangeslider_range1,
                 rangeslider_range2
                 ):

    filtered_data = df[df['Range1'] == rangeslider_range1 and df['Range2'] == rangeslider_range2]

    return {
        'data': [go.Scatter(
            x=filtered_data['Range1'],
            y=filtered_data['Range2'],
            mode='markers',
        )],
        'layout': go.Layout(
            xaxis={
                'title': 'Range1',
            },
            yaxis={
                'title': 'Range2',
            },
            hovermode='closest'
        )
    }


if __name__ == '__main__':
    app.run_server()

Answer 1

您正在将数据框的一列与比较整个对象的列表进行比较。 rangeslider_range1 是一个包含两个值的列表。因此，当您根据数据框的一列检查它时，Python 正在检查该列是否是该列表。您需要如下内容：

bln0 = ((df.loc[:, "Range1"] == rangeslider_range1[0]) | 
                        (df.loc[:, "Range1"] == rangeslider_range1[1]))
bln1 = ((df.loc[:, "Range2"] == rangeslider_range2[0]) | 
                        (df.loc[:, "Range2"] == rangeslider_range2[1]))
filtered_data = df.loc[bln0 & bln1, :]

这将根据范围滑块中的值检查列中的元素。如果您希望值介于范围滑块值之间，您可以使用 <= 或 >=

这是您拥有的完整代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly
import plotly.graph_objs as go


#Define Dash App
app=dash.Dash()

df =  pd.DataFrame({
    'Range1': [1, 2, 3, 4, 5, 6],
    'Range2': [6, 7, 8, 9, 10, 11],
})


app.layout = html.Div([
    html.Div([
        html.H2('Sliders'),

        html.H4('Range1'),
        dcc.RangeSlider(
                        id='rangeslider_range1',
                        min=df['Range1'].min(),
                        max=df['Range1'].max(),
                        marks={str(range1): str(range1) for range1 in df['Range1'].unique()},
                        value = [df['Range1'].min(),df['Range1'].max()]
                        ),

        html.H4('Range2'),
        dcc.RangeSlider(
                        id='rangeslider_range2',
                        min=df['Range2'].min(),
                        max=df['Range2'].max(),
                        marks={str(range2): str(range2) for range2 in df['Range2'].unique()},
                        value = [df['Range2'].min(),df['Range2'].max()]
                        ),


        ],style={'width': '30%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(id='graph_test'),
        ],
        style={'width': '60%', 'display': 'inline-block', 'float': 'right'})
    ]
)

@app.callback(
     dash.dependencies.Output('graph_test', 'figure'),
    [dash.dependencies.Input('rangeslider_range1', 'value'),
     dash.dependencies.Input('rangeslider_range2', 'value')#,

     ])

def update_graph(
                 rangeslider_range1,
                 rangeslider_range2
                 ):

    bln0 = ((df.loc[:, "Range1"] == rangeslider_range1[0]) | (df.loc[:, "Range1"] == rangeslider_range1[1]))
    bln1 = ((df.loc[:, "Range2"] == rangeslider_range2[0]) | (df.loc[:, "Range2"] == rangeslider_range2[1]))
    filtered_data = df.loc[bln0 & bln1, :]
    # filtered_data = df[df['Range1'] == rangeslider_range1 and df['Range2'] == rangeslider_range2]

    return {
        'data': [go.Scatter(
            x=filtered_data['Range1'],
            y=filtered_data['Range2'],
            mode='markers',
        )],
        'layout': go.Layout(
            xaxis={
                'title': 'Range1',
            },
            yaxis={
                'title': 'Range2',
            },
            hovermode='closest'
        )
    }


if __name__ == '__main__':
    app.run_server(port = 8000)

破折号：散点图的多个范围

Dash: Multiple Ranges for Scatter Plot

plotly

plotly-dash