堆栈内存溢出
  简体   繁体   English

Plotly-Dash：如何基于两个不同的数据框创建图形？

[英]Plotly-Dash: How to create a figure based on two different dataframes?

 原文  2020-11-14 19:19:47  2   1    python/ pandas/ plotly/ plotly-dash/ plotly-python

问题描述

I am trying to create a graph coming from two separate dataframes in dash.我正在尝试创建一个来自破折号中两个独立数据框的图表。 For replicability consider the following:对于可复制性，请考虑以下几点：

date = ["2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"]

region = ["Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon"
          ,"Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas"
          ,"Visayas","Visayas"
          ,"Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao"
         ,"Mindanao","Mindanao"
         ,"Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon"
          ,"Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas"
          ,"Visayas","Visayas"
          ,"Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao"
         ,"Mindanao","Mindanao"]
value = ["1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"
        ,"1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"]

product = ["rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
           ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"]
date = [[i] for i in date]
region = [[i] for i in region]
value = [[i] for i in value]
product = [[i] for i in product]

date = pd.DataFrame(date, columns = ["DATE"])
region = pd.DataFrame(region, columns = ["state"])
value = pd.DataFrame(value, columns = ["value"])
product = pd.DataFrame(product, columns = ["product"])
state_level = pd.concat([date,region, value, product], axis=1)

date = ["2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"]
city = ["Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila"
          ,"Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu"
          ,"Metro Cebu","Metro Cebu"
          ,"Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao"
         ,"Metro Davao","Metro Davao"
         ,"Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila"
          ,"Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu"
          ,"Metro Cebu","Metro Cebu"
          ,"Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao"
         ,"Metro Davao","Metro Davao"]

value = ["1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"
        ,"1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"]

product = ["rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
           ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"]
date = [[i] for i in date]
city = [[i] for i in city]
value = [[i] for i in value]
product = [[i] for i in product]

date = pd.DataFrame(date, columns = ["DATE"])
city = pd.DataFrame(city, columns = ["city"])
value = pd.DataFrame(value, columns = ["value"])
product = pd.DataFrame(product, columns = ["product"])
city_level = pd.concat([date,city, value, product], axis=1)

Consider an example graph in plotly:考虑 plotly 中的示例图：

import plotly.graph_objects as go
historical = state_level[state_level["state"]=="Visayas"]
historical = historical[historical["product"]=="fish"]
historical
fig = go.Figure()
fig.add_trace(go.Scatter(x=historical["DATE"]
                         ,y=historical["value"]
                         ,name="Historical",
                         mode="lines"
                         ,line={"color": "grey", "width": 1}
                         ,showlegend=False))
fig.show()

the graph is:该图是： 在此处输入图像描述

I want to create a dynamic dashboard where the user will choose either at the state level or city level, choose what state or city, and then choose what product (rice or fish), and the graph will just dynamically change based on the user input, my code is as follow:我想创建一个动态仪表板，用户可以在其中选择 state 级别或城市级别，选择 state 或城市，然后选择产品（大米或鱼），图表将根据用户输入动态变化，我的代码如下：

state = [str(i) for i in state_level.state.unique()]
state.sort(reverse = False)
city = [i for i in city_level.city.unique()]
city.sort(reverse = False)

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd

app = JupyterDash(__name__)
all_options = {
    'State': state,
    'City': city
}
app.layout = html.Div([
    dcc.Dropdown(
        id='Level1',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='State'
    ),

    html.Hr(),

    dcc.Dropdown(id='Level2'),
    
    html.Hr(),

    dcc.Dropdown(id='Product',options=[{'label': k, 'value': k} for k in ["rice","fish"]],
                 value='Rice'),
    html.Hr(),

    html.Div(id='display-selected-values')
])


@app.callback(
    Output('Level2', 'options'),
    [Input('Level1', 'value')])

def set_options(selected_level1):
    return [{'label': i, 'value': i} for i in all_options[selected_level1]]
app.run_server(mode='inline')

在此处输入图像描述

but I could not figure out how to do this given that my sources are from two different dataframes.但鉴于我的来源来自两个不同的数据框，我不知道该怎么做。

1 个解决方案

解决方案1
 1 已采纳  2020-11-16 00:38:16

One approach is to store your dataframes in a dictionary like this:一种方法是将数据帧存储在这样的字典中：

dfs = {'state': state_level,
       'city': city_level}

And then set up a few dynamical callbacks to use as input for a figure like this:然后设置一些动态回调以用作像这样的图形的输入：

# Make a figure based on the selections
@app.callback( # Columns 2m_temp_prod, or....
    Output('Products_graph', 'figure'),
    [Input('countries-radio', 'value'),
     Input('cities-radio', 'value'),
     Input('products-radio', 'value')])
def make_graph(level, area, product):
    
#     level='city'
#     area='Metro Manila'
#     product = 'fish'
    
    df = dfs[level]
    df = df[df[df.columns[1]]==area]
    df = df[df['product']==product]
    
    fig=go.Figure()
    fig.add_traces(go.Scatter(x=df.DATE, y =df['value'] ))
    return fig

The low variation in your values made it a bit hard to see if the dynamics worked as they shold since you always end up with a straight line.你的价值观的低变化使得很难看出动态是否像他们所展示的那样起作用，因为你总是以一条直线结束。 But we can talk details when you find the time to look at the details in the code snippet below.但是，当您有时间查看下面代码片段中的详细信息时，我们可以讨论详细信息。 Here's the resulting app:这是生成的应用程序：

在此处输入图像描述

In this setup, the options for area will change according to city or state level在此设置中，区域选项将根据城市或 state 级别而变化

Complete code:完整代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash
import plotly.graph_objects as go

# data
import pandas as pd
date = ["2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"]

region = ["Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon"
          ,"Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas"
          ,"Visayas","Visayas"
          ,"Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao"
         ,"Mindanao","Mindanao"
         ,"Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon","Luzon"
          ,"Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas","Visayas"
          ,"Visayas","Visayas"
          ,"Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao","Mindanao"
         ,"Mindanao","Mindanao"]
value = ["1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"
        ,"1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"]

product = ["rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
           ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"]
date = [[i] for i in date]
region = [[i] for i in region]
value = [[i] for i in value]
product = [[i] for i in product]

date = pd.DataFrame(date, columns = ["DATE"])
region = pd.DataFrame(region, columns = ["state"])
value = pd.DataFrame(value, columns = ["value"])
product = pd.DataFrame(product, columns = ["product"])
state_level = pd.concat([date,region, value, product], axis=1)

date = ["2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"
        ,"2020-01-01","2020-02-01","2020-03-01","2020-04-01","2020-05-01","2020-06-01"
        ,"2020-07-01","2020-08-01","2020-09-01","2020-10-01","2020-11-01","2020-12-01"]
city = ["Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila"
          ,"Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu"
          ,"Metro Cebu","Metro Cebu"
          ,"Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao"
         ,"Metro Davao","Metro Davao"
         ,"Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila","Metro Manila"
          ,"Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu","Metro Cebu"
          ,"Metro Cebu","Metro Cebu"
          ,"Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao","Metro Davao"
         ,"Metro Davao","Metro Davao"]

value = ["1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"
        ,"1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12",
        "1","2","3","4","5","6","7","8","9","10","11","12"]

product = ["rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
           ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice","rice"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"
          ,"fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish","fish"]
date = [[i] for i in date]
city = [[i] for i in city]
value = [[i] for i in value]
product = [[i] for i in product]

date = pd.DataFrame(date, columns = ["DATE"])
city = pd.DataFrame(city, columns = ["city"])
value = pd.DataFrame(value, columns = ["value"])
product = pd.DataFrame(product, columns = ["product"])
city_level = pd.concat([date,city, value, product], axis=1)

# Dash
app = JupyterDash(__name__)
app.config['suppress_callback_exceptions'] = True

dfs = {'state': state_level,
       'city': city_level}


all_options = {
    'state': list(dfs['state']['state'].unique()),
    'city': list(dfs['city']['city'].unique())
}
app.layout = html.Div([
    
    dcc.RadioItems(
        id='countries-radio',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='state'
    ),

    html.Hr(),

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

    html.Hr(),

  
    
        dcc.RadioItems(
        id='products-radio',
        options=[{'label': k, 'value': k} for k in dfs['state']['product'].unique()],
        value='rice'
    ),
    
    html.Hr(),
    
    html.Div(id='display-selected-values'),
    
    dcc.Graph(id="Products_graph")
    
])


@app.callback(
    Output('cities-radio', 'options'),
    [Input('countries-radio', 'value')])
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]


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


@app.callback(
    Output('display-selected-values', 'children'),
    [Input('countries-radio', 'value'),
     Input('cities-radio', 'value')])
def set_display_children(selected_country, selected_city):


     return 'Level: ' + u'{} | Area: {}'.format(
#         selected_city, selected_country,
         selected_country, selected_city, 
    )

# Make a figure based on the selections
@app.callback( # Columns 2m_temp_prod, or....
    Output('Products_graph', 'figure'),
    [Input('countries-radio', 'value'),
     Input('cities-radio', 'value'),
     Input('products-radio', 'value')])
def make_graph(level, area, product):
    
#     level='city'
#     area='Metro Manila'
#     product = 'fish'
    
    df = dfs[level]
    df = df[df[df.columns[1]]==area]
    df = df[df['product']==product]
    
    fig=go.Figure()
    fig.add_traces(go.Scatter(x=df.DATE, y =df['value'] ))
    return fig

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Plotly-Dash：如何跨两行跨越一个组件 - Plotly-Dash: How to span a component across two rows Plotly-Dash：如何在不更改图形布局的情况下仅更新图形数据？ - Plotly-Dash: How to update only figure data without changing the figure layout? Plotly-Dash：如何在字典中多个数据帧的多列之间进行选择？ - Plotly-Dash: How to choose between multiple columns from multiple dataframes in a dictionary? 如何在 plotly-dash 中超链接图像？ - How to hyperlink an image in plotly-dash? Plotly-Dash：如何在回调之间显示图形的相同选定区域？ - Plotly-Dash: How to show the same selected area of a figure between callbacks? 图未保存在函数中。 我该如何解决？ - Figure is not being saved in plotly-dash out of a function. How do I fix this? 如何使用Plotly-Dash调整滑块和选择器的范围 - How to Range Slider and Selector with Plotly-Dash Plotly：如何使用 plotly-dash 在一页上创建“输入文本”并在第二页或选项卡上输出（图形）？ - Plotly: How to create 'input text' on one page and output (graphs) on second page or tab, by using plotly-dash? Plotly-Dash：如何从 Dash WebApp 中删除状态图标？ - Plotly-Dash: How to remove the status icon from Dash WebApp? 如何在单个Flask应用程序中使用Plotly-Dash创建多个Dashoards？ - How to Create Multiple Dashoards using Plotly-Dash in Single Flask App?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM