创建具有多个下拉菜单的虚线图答案

【问题标题】：Create a dash graph with multiple dropdown menus创建具有多个下拉菜单的虚线图
【发布时间】：2020-01-27 04:36:41
【问题描述】：

我有以下 csv 文件，其中包含 4 个不同的服务器和两个变量：CPU 使用率和内存使用率。

Server,Time_floor,variable,Value
A,0,CPU Usage,0.4544871794871793
A,0,Memory Usage,0.49389743589743573
A,1,CPU Usage,0.4865365853658536
A,1,Memory Usage,0.4246829268292683
A,2,CPU Usage,0.5371627906976744
A,2,Memory Usage,0.43420930232558136
A,3,CPU Usage,0.5200689655172416
A,3,Memory Usage,0.4970344827586206
B,0,CPU Usage,0.5252307692307693
B,0,Memory Usage,0.4178461538461538
B,1,CPU Usage,0.4401428571428571
B,1,Memory Usage,0.41678571428571426
B,2,CPU Usage,0.5404285714285715
B,2,Memory Usage,0.3617857142857143
B,3,CPU Usage,0.5288999999999999
B,3,Memory Usage,0.5067999999999999

我想做的是有一个带有下拉菜单的仪表板应用程序，每个服务器都允许我选择要绘制的变量。该图将 time_floor 作为 x 轴，变量的值在其 y 轴上。

我有一个 python 脚本，它会生成以下 dash 应用程序，其中变量下拉菜单取决于服务器下拉菜单：

代码如下：

import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

df = pd.read_csv('Manual_Log_Filtered.csv')
print(df.columns)

servers = df['Server'].unique()
print(servers)

metrics = df['variable'].unique()
print(metrics)

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.RadioItems(
        id='servers-radio',
        options=[{'label': k, 'value': k} for k in servers],
        value='A'
    ),

    html.Hr(),

    dcc.RadioItems(id='metrics-radio'),

    html.Hr(),

    html.Div(id='display-selected-values'),
    dcc.Graph(id='indicator-graphic')
])


@app.callback(
    Output('metrics-radio', 'options'),
    [Input('servers-radio', 'value')])
def set_metrics_options(selected_country):
    return [{'label': i, 'value': i} for i in metrics]


@app.callback(
    Output('metrics-radio', 'value'),
    [Input('metrics-radio', 'options')])
def set_metrics_value(available_options):
    print(available_options[0]['value'])
    return available_options[0]['value']

@app.callback(
    Output('indicator-graphic', 'figure'),
    [Input('metrics-radio',  'value')])
def update_graph(metrics,
                 year_value):
    dff = df[df['Time_floor'] == year_value]
    print(dff)

    return {
        'data': [dict(
            x=dff[dff['Time_floor'] == year_value],
            y=dff[dff['variable'] == metrics["Value"]],
            mode='markers',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )],
        'layout': dict(
            xaxis={
                'title': year_value
            },
            yaxis={
                'title': metrics
            },
            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
            hovermode='closest'
        )
    }



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

我想在图表输出中看到的是这样的（忽略红点）：

任何帮助将不胜感激。

谢谢！

【问题讨论】：

请提供 csv 样本，而不是屏幕截图
你说得对，我现在更新了我的问题

标签： python plotly plotly-dash

【解决方案1】：

您以错误的方式访问数据。
通过使用 pandas，您必须通过以下方式访问数据：

x=dff['Time_floor']
y=dff[dff['variable'] == metrics]["Value"]

此外，如果您过滤 Time_floor 变量，您只会得到一个值。
为了允许一个时间表，最好有多个值。

要在图形中应用线条和标记，需要设置如下模式：

mode='lines+markers'

您还应该看看您的 update_graph 函数。
似乎缺少 year_value 变量。

【讨论】：