Python Plotly Dash：如何从字典中的多个数据帧中选择多列？

我想绘制一个双y轴图，用户可以在其中选择要查看的变量。我希望下拉选项更改原始y轴，但也希望第二个y轴随变量更改而更改。数据来自两个字典，其中每个字典有两个键，它们是数据帧。以下是格言：

df_vals.keys()
['corn','soybeans']   
{'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-21 00:00:00'), 2: Timestamp('2020-09-22 00:00:00'), 3: Timestamp('2020-09-23 00:00:00'), 4: Timestamp('2020-09-24 00:00:00'), 5: Timestamp('2020-09-25 00:00:00'), 6: Timestamp('2020-09-26 00:00:00'), 7: Timestamp('2020-09-27 00:00:00'), 8: Timestamp('2020-09-28 00:00:00'), 9: Timestamp('2020-09-29 00:00:00'), 10: Timestamp('2020-09-30 00:00:00'), 11: Timestamp('2020-10-01 00:00:00'), 12: Timestamp('2020-10-02 00:00:00'), 13: Timestamp('2020-10-03 00:00:00'), 14: Timestamp('2020-10-04 00:00:00'), 15: Timestamp('2020-10-05 00:00:00')}, '2m_temp_24hdelta_prod': {0: -0.33056551535638423, 1: -0.06352654836543402, 2: -0.276225357129493, 3: -0.7788107233764435, 4: -0.12182345812042986, 5: 0.4844870528180379, 6: -0.7795401737865336, 7: -1.3736563255451468, 8: -0.7925949910485673, 9: -0.6084065411465024, 10: -0.6532739602739552, 11: -0.5334182358612463, 12: -0.3214601096392593, 13: 0.005672046711691303, 14: 0.294874775721931, 15: 0.0}, '2m_temp_24hdelta_area': {0: -0.2942234811255382, 1: -0.06695257736951654, 2: -0.2382484006633631, 3: -0.747444491858053, 4: -0.008792915536150941, 5: 0.25843822574146474, 6: -0.8653840134962728, 7: -1.3306357244341183, 8: -0.77807373911064, 9: -0.6101878063800394, 10: -0.6602593986352374, 11: -0.5377113682438022, 12: -0.3489377042704134, 13: -0.12997682663355925, 14: 0.08031697715852158, 15: 0.0}, 'total_precip_24hdelta_prod': {0: -1.4417379991236094, 1: -3.24276961794111, 2: -1.9549294932106442, 3: 1.0805492310759035, 4: -2.8572102912370547, 5: -0.6036102993252254, 6: 0.068152851219848, 7: -0.37760433118519804, 8: -0.2182212103223477, 9: 0.14385291749053375, 10: -0.09611101762074367, 11: -0.44170367466228744, 12: -0.9926136091953488, 13: -0.26638156415402015, 14: -0.0435076228174961, 15: 0.0}, 'total_precip_24hdelta_area': {0: -0.8969484573159082, 1: -2.002193332285897, 2: -1.3265684841453602, 3: 0.5232970017014504, 4: -1.9744318826572878, 5: -0.4756557183821801, 6: 0.09401319045911638, 7: -0.2480262049680989, 8: -0.16164720991353132, 9: 0.12918646107950632, 10: -0.025385234499880355, 11: -0.37094005589542123, 12: -0.7621485373750772, 13: -0.21974376949919702, 14: -0.06387744429696394, 15: 0.0}}
{'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-21 00:00:00'), 2: Timestamp('2020-09-22 00:00:00'), 3: Timestamp('2020-09-23 00:00:00'), 4: Timestamp('2020-09-24 00:00:00'), 5: Timestamp('2020-09-25 00:00:00'), 6: Timestamp('2020-09-26 00:00:00'), 7: Timestamp('2020-09-27 00:00:00'), 8: Timestamp('2020-09-28 00:00:00'), 9: Timestamp('2020-09-29 00:00:00'), 10: Timestamp('2020-09-30 00:00:00'), 11: Timestamp('2020-10-01 00:00:00'), 12: Timestamp('2020-10-02 00:00:00'), 13: Timestamp('2020-10-03 00:00:00'), 14: Timestamp('2020-10-04 00:00:00'), 15: Timestamp('2020-10-05 00:00:00')}, '2m_temp_24hdelta_prod': {0: -0.41072100441995785, 1: -0.11297222900273206, 2: -0.3134558546203517, 3: -0.7055797268403201, 4: -0.14038170579478787, 5: 0.2625117005223226, 6: -0.7101408224478941, 7: -1.2573241419225902, 8: -0.7906424533010389, 9: -0.661536032998284, 10: -0.6822789549363446, 11: -0.5744259308508103, 12: -0.4206210457410846, 13: -0.08431581171659296, 14: 0.2654961632050054, 15: 0.0}, '2m_temp_24hdelta_area': {0: -0.36772899690348704, 1: -0.05348366544356093, 2: -0.24183851104639115, 3: -0.6953305273210354, 4: -0.045424744173602496, 5: 0.19001500780368247, 6: -0.821935103347599, 7: -1.265563237441084, 8: -0.7328581189116925, 9: -0.6143048783236709, 10: -0.6633462127739507, 11: -0.5190203572096471, 12: -0.39498226425933547, 13: -0.10526773964830015, 14: 0.19258302497068705, 15: 0.0}, 'total_precip_24hdelta_prod': {0: -0.6776698356563055, 1: -1.7516299539550721, 2: -1.270815712012518, 3: 0.5996647217068156, 4: -2.2466045890287396, 5: -0.6706621597096377, 6: 0.06719919310410405, 7: -0.3572052717181586, 8: -0.2512178851633781, 9: 0.1313636195701381, 10: 0.08179245850142033, 11: -0.3036658888458674, 12: -0.8200237460316371, 13: -0.32927495598480583, 14: -0.08189579932441349, 15: 0.0}, 'total_precip_24hdelta_area': {0: -0.7530386453128719, 1: -1.7027556154743797, 2: -1.0907657669920294, 3: 0.429094034006764, 4: -1.9424324271143407, 5: -0.5370968484676638, 6: 0.044404490985521246, 7: -0.30794153270377544, 8: -0.2471378005907392, 9: 0.1212115468745879, 10: 0.07486462848670472, 11: -0.3507116185903665, 12: -0.7247205225779287, 13: -0.25431240691233936, 14: -0.06960793926681186, 15: 0.0}}

df_deltas.keys()
['corn','soybeans']
{'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-20 06:00:00'), 2: Timestamp('2020-09-20 12:00:00'), 3: Timestamp('2020-09-20 18:00:00'), 4: Timestamp('2020-09-21 00:00:00'), 5: Timestamp('2020-09-21 06:00:00'), 6: Timestamp('2020-09-21 12:00:00'), 7: Timestamp('2020-09-21 18:00:00'), 8: Timestamp('2020-09-22 00:00:00'), 9: Timestamp('2020-09-22 06:00:00'), 10: Timestamp('2020-09-22 12:00:00'), 11: Timestamp('2020-09-22 18:00:00'), 12: Timestamp('2020-09-23 00:00:00'), 13: Timestamp('2020-09-23 06:00:00'), 14: Timestamp('2020-09-23 12:00:00'), 15: Timestamp('2020-09-23 18:00:00'), 16: Timestamp('2020-09-24 00:00:00'), 17: Timestamp('2020-09-24 06:00:00'), 18: Timestamp('2020-09-24 12:00:00'), 19: Timestamp('2020-09-24 18:00:00'), 20: Timestamp('2020-09-25 00:00:00'), 21: Timestamp('2020-09-25 06:00:00'), 22: Timestamp('2020-09-25 12:00:00'), 23: Timestamp('2020-09-25 18:00:00'), 24: Timestamp('2020-09-26 00:00:00'), 25: Timestamp('2020-09-26 06:00:00'), 26: Timestamp('2020-09-26 12:00:00'), 27: Timestamp('2020-09-26 18:00:00'), 28: Timestamp('2020-09-27 00:00:00'), 29: Timestamp('2020-09-27 06:00:00'), 30: Timestamp('2020-09-27 12:00:00'), 31: Timestamp('2020-09-27 18:00:00'), 32: Timestamp('2020-09-28 00:00:00'), 33: Timestamp('2020-09-28 06:00:00'), 34: Timestamp('2020-09-28 12:00:00'), 35: Timestamp('2020-09-28 18:00:00'), 36: Timestamp('2020-09-29 00:00:00'), 37: Timestamp('2020-09-29 06:00:00'), 38: Timestamp('2020-09-29 12:00:00'), 39: Timestamp('2020-09-29 18:00:00'), 40: Timestamp('2020-09-30 00:00:00'), 41: Timestamp('2020-09-30 06:00:00'), 42: Timestamp('2020-09-30 12:00:00'), 43: Timestamp('2020-09-30 18:00:00'), 44: Timestamp('2020-10-01 00:00:00'), 45: Timestamp('2020-10-01 06:00:00'), 46: Timestamp('2020-10-01 12:00:00'), 47: Timestamp('2020-10-01 18:00:00'), 48: Timestamp('2020-10-02 00:00:00'), 49: Timestamp('2020-10-02 06:00:00'), 50: Timestamp('2020-10-02 12:00:00'), 51: Timestamp('2020-10-02 18:00:00'), 52: Timestamp('2020-10-03 00:00:00'), 53: Timestamp('2020-10-03 06:00:00'), 54: Timestamp('2020-10-03 12:00:00'), 55: Timestamp('2020-10-03 18:00:00'), 56: Timestamp('2020-10-04 00:00:00'), 57: Timestamp('2020-10-04 06:00:00'), 58: Timestamp('2020-10-04 12:00:00'), 59: Timestamp('2020-10-04 18:00:00'), 60: Timestamp('2020-10-05 00:00:00')}, '2m_temp_prod': {0: 299.346777266481, 1: 294.0395117035824, 2: 292.9592738522704, 3: 301.3180464757325, 4: 300.62356652087135, 5: 295.3372490145483, 6: 293.70255086586366, 7: 301.74835531223954, 8: 300.63094530701716, 9: 295.19553201608596, 10: 293.61613871139605, 11: 302.1631229776387, 12: 300.9153730135594, 13: 295.15968865817507, 14: 293.4150837111033, 15: 301.41874976967574, 16: 300.2591302298784, 17: 294.35648855874496, 18: 292.60893943975975, 19: 300.69793228145136, 20: 299.21051997362474, 21: 293.03793188187217, 22: 290.7864320360987, 23: 298.83351270175194, 24: 297.3528693941268, 25: 291.19369512544074, 26: 289.09521928196455, 27: 297.6441935083638, 28: 296.7296754953959, 29: 290.9897312443865, 30: 289.32126319033677, 31: 298.7574828448876, 32: 298.12901959834915, 33: 292.5899489699376, 34: 290.89859256270717, 35: 300.43330551865887, 36: 299.4213926560918, 37: 293.6473005538043, 38: 291.78953606425546, 39: 300.96031965551913, 40: 299.8616920790521, 41: 293.9476866306047, 42: 292.00448821963647, 43: 301.2204786022793, 44: 300.1545728526989, 45: 294.30968496479613, 46: 292.3264718663577, 47: 301.6422264431679, 48: 300.6382119018213, 49: 294.9066383821488, 50: 292.9206232319892, 51: 302.28532470110673, 52: 301.118337633183, 53: 295.580361365072, 54: 293.5071232611944, 55: 302.4993713158521, 56: 301.1771411161832, 57: 295.87429820309063, 58: 293.8387870006977, 59: 302.3844741742686, 60: 300.92076629492163}, '2m_temp_area': {0: 299.79923425166567, 1: 294.4433522483179, 2: 293.1829305163771, 3: 301.76751592578194, 4: 300.97964970416314, 5: 295.58816311209137, 6: 293.944118250348, 7: 302.20448177813586, 8: 301.0782745090335, 9: 295.36833103932497, 10: 293.7448705435944, 11: 302.2414068531493, 12: 300.97154909133104, 13: 295.09171791304016, 14: 293.29872586829305, 15: 301.63398450993316, 16: 300.39729350367077, 17: 294.4765532352668, 18: 292.6348308697987, 19: 300.7196467769189, 20: 299.2413397435659, 21: 293.1571305856655, 22: 290.9298399188299, 23: 299.0361571649767, 24: 297.6784967259681, 25: 291.6225850820778, 26: 289.5307387179231, 27: 298.1675193109706, 28: 297.2851193736129, 29: 291.6047803054954, 30: 289.8725165929944, 31: 299.2259541567033, 32: 298.5645974740215, 33: 292.9844928941141, 34: 291.16692080415885, 35: 300.6640689360243, 36: 299.63105315816887, 37: 293.7973759485704, 38: 291.8748714049971, 39: 301.07558737962773, 40: 299.9769492884242, 41: 294.06556034682825, 42: 292.0989825175383, 43: 301.3224275326778, 44: 300.2429318269633, 45: 294.4016189433437, 46: 292.39193470959646, 47: 301.691478296914, 48: 300.693790365317, 49: 294.95729295702677, 50: 292.94815058578274, 51: 302.1922658603409, 52: 301.01878139937173, 53: 295.47413908911483, 54: 293.41960123543845, 55: 302.34370446075303, 56: 301.05227283650527, 57: 295.72013507339597, 58: 293.6867376233815, 59: 302.19133411599717, 60: 300.81799340051333}, 'total_precip_prod': {0: 0.0, 1: 0.19106968995229195, 2: 0.1557650112297922, 3: 0.42176822127339436, 4: 0.3635719686978164, 5: 0.624238127750141, 6: 0.7363658332723646, 7: 0.6637602529624484, 8: 0.8303668371501847, 9: 0.9645353650727154, 10: 0.9080621631493283, 11: 0.7407109615632305, 12: 1.2188155467167008, 13: 1.4934816133864144, 14: 0.8673540204216558, 15: 0.4536446670226782, 16: 0.5838893851141779, 17: 0.28997017910749373, 18: 0.396575809101194, 19: 0.3017425722928852, 20: 0.2600037974259506, 21: 0.10090977019496428, 22: 0.1120663639424084, 23: 0.11820662603244433, 24: 0.11351422163952127, 25: 0.0354462928350286, 26: 0.08973231687769569, 27: 0.11707786940722151, 28: 0.07097838855834729, 29: 0.03411315769121203, 30: 0.09051350215127027, 31: 0.11314915610119855, 32: 0.14753233086329737, 33: 0.1845242398275337, 34: 0.2518174918229658, 35: 0.17011312187047897, 36: 0.2749232044764252, 37: 0.2972017724997405, 38: 0.3552475267861772, 39: 0.27943871692889416, 40: 0.31981605728486306, 41: 0.19735958986038185, 42: 0.2806487307465678, 43: 0.2830918175327961, 44: 0.3288561686915008, 45: 0.1744303376099874, 46: 0.30609645936303326, 47: 0.21925050665230758, 48: 0.20281755796768022, 49: 0.06620804878284778, 50: 0.17684099550656973, 51: 0.19853145136367492, 52: 0.2563854573673008, 53: 0.24201876323456878, 54: 0.41939251801295807, 55: 0.36402178359658277, 56: 0.37120895070913373, 57: 0.281792653746079, 58: 0.5868870658107626, 59: 0.4927117680726645, 60: 0.5223743530274055}, 'total_precip_area': {0: 0.0, 1: 0.2869521154242563, 2: 0.21660564402622137, 3: 0.4856913604264373, 4: 0.5011640941544891, 5: 0.7562519498474788, 6: 0.7839821183163472, 7: 0.5862595162666312, 8: 0.8974715199444484, 9: 0.9610750641626696, 10: 0.7601911282379429, 11: 0.793906823631679, 12: 1.2383530336279156, 13: 1.0049543280590305, 14: 0.6820852351772055, 15: 0.442434189821785, 16: 0.6589929874909368, 17: 0.32723035127408134, 18: 0.4144798865599254, 19: 0.368782410513661, 20: 0.36137157927969976, 21: 0.1635789497829729, 22: 0.16409778482825316, 23: 0.16768421904602382, 24: 0.1808376986943956, 25: 0.058153150056705245, 26: 0.1269072928484502, 27: 0.14562713451681256, 28: 0.11216762073388148, 29: 0.062161294677683845, 30: 0.13994272590442386, 31: 0.1662560753829063, 32: 0.20624170840852787, 33: 0.216927525300605, 34: 0.26804054777036235, 35: 0.20587583527311556, 36: 0.297848309035157, 37: 0.2836083045675833, 38: 0.33686407205543173, 39: 0.276288892940258, 40: 0.3569925386418611, 41: 0.2258142673918131, 42: 0.30458249604018844, 43: 0.2882872466330577, 44: 0.36861110970625127, 45: 0.1945528585156628, 46: 0.2996099093542968, 47: 0.2370841370242934, 48: 0.24429531409451738, 49: 0.09534765734716107, 50: 0.19399822393477686, 51: 0.24311804406545334, 52: 0.3062432174815857, 53: 0.27031885272433986, 54: 0.40763842665734645, 55: 0.3546261915245615, 56: 0.4085152708749088, 57: 0.30056439476727764, 58: 0.5493651343645845, 59: 0.4937984226857489, 60: 0.531137675746978}}
{'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-20 06:00:00'), 2: Timestamp('2020-09-20 12:00:00'), 3: Timestamp('2020-09-20 18:00:00'), 4: Timestamp('2020-09-21 00:00:00'), 5: Timestamp('2020-09-21 06:00:00'), 6: Timestamp('2020-09-21 12:00:00'), 7: Timestamp('2020-09-21 18:00:00'), 8: Timestamp('2020-09-22 00:00:00'), 9: Timestamp('2020-09-22 06:00:00'), 10: Timestamp('2020-09-22 12:00:00'), 11: Timestamp('2020-09-22 18:00:00'), 12: Timestamp('2020-09-23 00:00:00'), 13: Timestamp('2020-09-23 06:00:00'), 14: Timestamp('2020-09-23 12:00:00'), 15: Timestamp('2020-09-23 18:00:00'), 16: Timestamp('2020-09-24 00:00:00'), 17: Timestamp('2020-09-24 06:00:00'), 18: Timestamp('2020-09-24 12:00:00'), 19: Timestamp('2020-09-24 18:00:00'), 20: Timestamp('2020-09-25 00:00:00'), 21: Timestamp('2020-09-25 06:00:00'), 22: Timestamp('2020-09-25 12:00:00'), 23: Timestamp('2020-09-25 18:00:00'), 24: Timestamp('2020-09-26 00:00:00'), 25: Timestamp('2020-09-26 06:00:00'), 26: Timestamp('2020-09-26 12:00:00'), 27: Timestamp('2020-09-26 18:00:00'), 28: Timestamp('2020-09-27 00:00:00'), 29: Timestamp('2020-09-27 06:00:00'), 30: Timestamp('2020-09-27 12:00:00'), 31: Timestamp('2020-09-27 18:00:00'), 32: Timestamp('2020-09-28 00:00:00'), 33: Timestamp('2020-09-28 06:00:00'), 34: Timestamp('2020-09-28 12:00:00'), 35: Timestamp('2020-09-28 18:00:00'), 36: Timestamp('2020-09-29 00:00:00'), 37: Timestamp('2020-09-29 06:00:00'), 38: Timestamp('2020-09-29 12:00:00'), 39: Timestamp('2020-09-29 18:00:00'), 40: Timestamp('2020-09-30 00:00:00'), 41: Timestamp('2020-09-30 06:00:00'), 42: Timestamp('2020-09-30 12:00:00'), 43: Timestamp('2020-09-30 18:00:00'), 44: Timestamp('2020-10-01 00:00:00'), 45: Timestamp('2020-10-01 06:00:00'), 46: Timestamp('2020-10-01 12:00:00'), 47: Timestamp('2020-10-01 18:00:00'), 48: Timestamp('2020-10-02 00:00:00'), 49: Timestamp('2020-10-02 06:00:00'), 50: Timestamp('2020-10-02 12:00:00'), 51: Timestamp('2020-10-02 18:00:00'), 52: Timestamp('2020-10-03 00:00:00'), 53: Timestamp('2020-10-03 06:00:00'), 54: Timestamp('2020-10-03 12:00:00'), 55: Timestamp('2020-10-03 18:00:00'), 56: Timestamp('2020-10-04 00:00:00'), 57: Timestamp('2020-10-04 06:00:00'), 58: Timestamp('2020-10-04 12:00:00'), 59: Timestamp('2020-10-04 18:00:00'), 60: Timestamp('2020-10-05 00:00:00')}, '2m_temp_prod': {0: 299.4681144428137, 1: 294.4593329079582, 2: 293.54097959722486, 3: 301.26850218370805, 4: 300.4714986353434, 5: 295.6384695410705, 6: 294.2218375466852, 7: 301.7426496375417, 8: 300.4512511041961, 9: 295.3463775610583, 10: 294.00147574962756, 11: 302.04475406462933, 12: 300.7236658622478, 13: 295.24334771914255, 14: 293.7074020631231, 15: 301.7624504225804, 16: 300.4964931687989, 17: 294.75437504400884, 18: 293.1177542350017, 19: 301.0425274988938, 20: 299.46808452778663, 21: 293.52076913001173, 22: 291.3670613175431, 23: 299.3793965992101, 24: 297.7263093286383, 25: 291.7095202331552, 26: 289.6578323905783, 27: 298.15977187729777, 28: 296.9884342085861, 29: 291.43100183368114, 30: 289.77806100941024, 31: 299.00450242361666, 32: 298.15618404166, 33: 292.73800154126627, 34: 291.07457059787265, 35: 300.5683567053199, 36: 299.3708029435806, 37: 293.67890398828234, 38: 291.954942552734, 39: 301.1051505527471, 40: 299.7999782544342, 41: 294.0840368998602, 42: 292.31118300204673, 43: 301.3976538328202, 44: 300.07823191309984, 45: 294.45023381986016, 46: 292.62675527729584, 47: 301.7900197148812, 48: 300.5590082986463, 49: 294.9896801203776, 50: 293.1241761449157, 51: 302.36329836985607, 52: 300.97122596719737, 53: 295.59237808816266, 54: 293.67785157848175, 55: 302.64353699591527, 56: 301.1035750112269, 57: 295.9278212054364, 58: 294.0324357819224, 59: 302.4832018963981, 60: 300.8427400317463}, '2m_temp_area': {0: 299.4903718737801, 1: 294.2924835295078, 2: 293.30135473218274, 3: 301.3528640298525, 4: 300.5939881510472, 5: 295.70744811622785, 6: 294.2521907610824, 7: 301.7100774359669, 8: 300.44506163325167, 9: 295.238423311095, 10: 293.8509583022139, 11: 301.6235104014979, 12: 300.38743669809435, 13: 294.8808530776623, 14: 293.33325543225476, 15: 301.4149251854487, 16: 300.1796642776425, 17: 294.39239805130165, 18: 292.66981534530925, 19: 300.5419360845211, 20: 299.0580229759339, 21: 293.0690025289753, 22: 290.9169097601789, 23: 298.92199569749033, 24: 297.4673382419046, 25: 291.4599993026732, 26: 289.452388873785, 27: 297.98953222540143, 28: 296.98633186869347, 29: 291.4589865652578, 30: 289.8288914753008, 31: 298.94272407170354, 32: 298.23250648648224, 33: 292.83814534455996, 34: 291.11886718509857, 35: 300.40881750455577, 36: 299.31958687273186, 37: 293.607006890439, 38: 291.81444341023143, 39: 300.8265637430714, 40: 299.6454967052681, 41: 293.9106555122605, 42: 292.1023114379392, 43: 301.12502226064896, 44: 299.91897396641514, 45: 294.27870082533354, 46: 292.4308511036389, 47: 301.51583391071864, 48: 300.39429493794523, 49: 294.825486042682, 50: 292.93778771753085, 51: 302.0071005199438, 52: 300.74239613744925, 53: 295.38249105817647, 54: 293.45710875169135, 55: 302.25559951138456, 56: 300.8353769061142, 57: 295.6525398583873, 58: 293.7632451527435, 59: 302.0551372494585, 60: 300.54910101224283}, 'total_precip_prod': {0: 0.0, 1: 0.4344171852327147, 2: 0.4351379346608463, 3: 0.9091314020100694, 4: 0.7838464939768977, 5: 1.0303630570555136, 6: 1.168093427310163, 7: 0.8635649194545677, 8: 1.180842617204555, 9: 1.0926651254176625, 10: 0.8283334033945278, 11: 0.8444548557416743, 12: 1.3230640130302405, 13: 1.2194759096975982, 14: 0.7328129706460099, 15: 0.47450659159057845, 16: 0.5808363103089833, 17: 0.28338951318682726, 18: 0.39698079867625957, 19: 0.37495920568614616, 20: 0.33256622409109604, 21: 0.09931783596352596, 22: 0.1293731106563246, 23: 0.14798406577292791, 24: 0.18096669978617885, 25: 0.05295233242627148, 26: 0.11851136022355316, 27: 0.12519627617895362, 28: 0.09146508542790638, 29: 0.04829302677559146, 30: 0.11041590211762027, 31: 0.14573868900912046, 32: 0.18215252985155908, 33: 0.18280908457277276, 34: 0.2248243307367063, 35: 0.17947363978224146, 36: 0.2924242956937053, 37: 0.2586747544378083, 38: 0.33937087683999867, 39: 0.2928781027298378, 40: 0.3935333755687144, 41: 0.2365752557775799, 42: 0.3215975487263272, 43: 0.32446922789494864, 44: 0.40520923133523234, 45: 0.18850232039108583, 46: 0.3206818541123286, 47: 0.2592275400999963, 48: 0.2610206474998234, 49: 0.0825337926678261, 50: 0.19092392007472064, 51: 0.2515463341682229, 52: 0.32613213524316664, 53: 0.23563493853109554, 54: 0.4110033936434478, 55: 0.38235885945226183, 56: 0.42730548177205857, 57: 0.2815641222074818, 58: 0.5961723489376685, 59: 0.5535344292974106, 60: 0.590918096887046}, 'total_precip_area': {0: 0.0, 1: 0.3874422960619588, 2: 0.3534671039565543, 3: 0.7409486316169753, 4: 0.6940791707728421, 5: 1.050536962899086, 6: 1.1507307395821944, 7: 0.8040717430552817, 8: 1.2714251971087065, 9: 1.238737113112408, 10: 0.874670190928147, 11: 1.0056286133748165, 12: 1.4698900412759783, 13: 1.003917146674298, 14: 0.6760869472842964, 15: 0.46827391738334945, 16: 0.6192899499044445, 17: 0.30060294065641396, 18: 0.41819106385838506, 19: 0.42650150247172797, 20: 0.37798023230687594, 21: 0.13500750520245205, 22: 0.14298402753104766, 23: 0.15948345822813867, 24: 0.18379226168252366, 25: 0.06000665823151941, 26: 0.1208072573649105, 27: 0.1350174494403403, 28: 0.11033956479303804, 29: 0.06970661157888385, 30: 0.16430003817188624, 31: 0.20396331622388164, 32: 0.2434592812259675, 33: 0.2349487648431431, 34: 0.2746628172448139, 35: 0.2223445586696201, 36: 0.32000417926146, 37: 0.2856880861377167, 38: 0.3563173295637319, 39: 0.2961985136805571, 40: 0.39572744360892087, 41: 0.25261863325235423, 42: 0.3480723202390621, 43: 0.33450860690381784, 44: 0.40810079238884994, 45: 0.2246481215656477, 46: 0.322536138199169, 47: 0.26302935652500986, 48: 0.26877015748360655, 49: 0.10435240067851569, 50: 0.23626983714582017, 51: 0.2921901873852093, 52: 0.3573174778311772, 53: 0.2690948499009291, 54: 0.43485595266861593, 55: 0.3857033635552736, 56: 0.45008050524046406, 57: 0.31559742112580763, 58: 0.5897464914238096, 59: 0.5591084829706243, 60: 0.6031174118554716}}

如您所见，数据帧彼此相关。第一个数据帧包含来自预测模型的6小时数据，该模型针对4个不同的变量持续15天。第二个数据框包含24小时数据，描述了

df_vals

中特定变量值相对于24小时前的变化（增量）。因此，我想为y1轴上的实际值绘制一个折线图，并绘制一个条形图来显示y2轴上24小时内的变化

我已经能够将

df_vals

中的值绘制为简单的线图，并使其具有交互性，因此用户可以在不同的数据帧之间切换，也可以在数据帧中切换不同的变量。代码如下：

app = JupyterDash(__name__)
cols=df_vals['corn'].columns[1:]
app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='variables',
                options=[{'label': i, 'value': i} for i in cols],
                value='2m_temp_prod'
            )
        ]),
        html.Div([
            dcc.Dropdown(
                id='crop_dropdown',
                options=[{'label': i, 'value': i} for i in df_vals.keys()],
                value='corn'
            )
        ]),
    dcc.Graph(id='plot')])
])

@app.callback(
    Output('crop-dropdown', 'options'),
    [Input('variables', 'value')])
def update_crop_dropdown(crop):
    return [{'label': i, 'value': i} for i in df_vals[crop]]


@app.callback(
    Output('plot', 'figure'),
    [Input('crop_dropdown', 'value'),
    Input('variables', 'value')])
def update_graph(crops, variable_name):
    if crops:
        return go.Figure(data=go.Scatter(x=df_vals[crops]['time'], y=df_vals[crops][variable_name], mode='lines'))
    else:
        return go.Figure(data=[])
app.run_server(mode='inline')

我希望将

df_vals

和

df_delta

中类似的列名一起绘制。例如，

df\u vals

中的列名称“2m\u temp\u prod”和

df\u delta

中的列名称“2m\u temp\u 24hdelta\u prod”将一起绘制。同样的想法也适用于其他3列

我很困惑我是如何让应用程序知道我想同时更新第一个和第二个y轴的，但只提供一个下拉列表

提供了一个示例图，其中我能够完成此任务，但作为一个独立的、非交互式的图。这个例子的目的是确保我想要达到的目标是明确的

---

我准备了一个使用Dash的设置，它应该考虑到您的所有考虑

您可以选择作物类型

[‘玉米’、‘大豆’、‘冬小麦’、‘春小麦’]

您可以为df_VAL中的每个croptype选择要在主y轴上显示的列

您可以为df_Delta中的每个croptype选择要在次要y轴上显示的列

由于

df_vals

和

df_delta

中的数据集分别显示在主y轴和次y轴上，因此它们不是菜单选择的一部分。如果我正确理解您的问题，提供的按钮应该足够了

地块1：

Crop=Corn，df\u vals=2m\u temp\u prod，df\u delta=2m\u prod\u 24hdelta\u prod

地块2：

Crop=大豆，df\u vals=总产量，df\u delta=总面积

完整代码：

---

我一直在用一种稍微不同的方法来扩展它，但遇到了一些问题。你愿意再帮我一次吗？还是我应该提出一个新问题？@EliTurasky我不介意简短的后续问题。如果需要时间回答，我会提出一个新问题。但让我们更深入地讨论

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import numpy as np
from plotly.subplots import make_subplots
from pandas import Timestamp

# data
df_vals = {'corn': pd.DataFrame({'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-20 06:00:00'), 2: Timestamp('2020-09-20 12:00:00'), 3: Timestamp('2020-09-20 18:00:00'), 4: Timestamp('2020-09-21 00:00:00'), 5: Timestamp('2020-09-21 06:00:00'), 6: Timestamp('2020-09-21 12:00:00'), 7: Timestamp('2020-09-21 18:00:00'), 8: Timestamp('2020-09-22 00:00:00'), 9: Timestamp('2020-09-22 06:00:00'), 10: Timestamp('2020-09-22 12:00:00'), 11: Timestamp('2020-09-22 18:00:00'), 12: Timestamp('2020-09-23 00:00:00'), 13: Timestamp('2020-09-23 06:00:00'), 14: Timestamp('2020-09-23 12:00:00'), 15: Timestamp('2020-09-23 18:00:00'), 16: Timestamp('2020-09-24 00:00:00'), 17: Timestamp('2020-09-24 06:00:00'), 18: Timestamp('2020-09-24 12:00:00'), 19: Timestamp('2020-09-24 18:00:00'), 20: Timestamp('2020-09-25 00:00:00'), 21: Timestamp('2020-09-25 06:00:00'), 22: Timestamp('2020-09-25 12:00:00'), 23: Timestamp('2020-09-25 18:00:00'), 24: Timestamp('2020-09-26 00:00:00'), 25: Timestamp('2020-09-26 06:00:00'), 26: Timestamp('2020-09-26 12:00:00'), 27: Timestamp('2020-09-26 18:00:00'), 28: Timestamp('2020-09-27 00:00:00'), 29: Timestamp('2020-09-27 06:00:00'), 30: Timestamp('2020-09-27 12:00:00'), 31: Timestamp('2020-09-27 18:00:00'), 32: Timestamp('2020-09-28 00:00:00'), 33: Timestamp('2020-09-28 06:00:00'), 34: Timestamp('2020-09-28 12:00:00'), 35: Timestamp('2020-09-28 18:00:00'), 36: Timestamp('2020-09-29 00:00:00'), 37: Timestamp('2020-09-29 06:00:00'), 38: Timestamp('2020-09-29 12:00:00'), 39: Timestamp('2020-09-29 18:00:00'), 40: Timestamp('2020-09-30 00:00:00'), 41: Timestamp('2020-09-30 06:00:00'), 42: Timestamp('2020-09-30 12:00:00'), 43: Timestamp('2020-09-30 18:00:00'), 44: Timestamp('2020-10-01 00:00:00'), 45: Timestamp('2020-10-01 06:00:00'), 46: Timestamp('2020-10-01 12:00:00'), 47: Timestamp('2020-10-01 18:00:00'), 48: Timestamp('2020-10-02 00:00:00'), 49: Timestamp('2020-10-02 06:00:00'), 50: Timestamp('2020-10-02 12:00:00'), 51: Timestamp('2020-10-02 18:00:00'), 52: Timestamp('2020-10-03 00:00:00'), 53: Timestamp('2020-10-03 06:00:00'), 54: Timestamp('2020-10-03 12:00:00'), 55: Timestamp('2020-10-03 18:00:00'), 56: Timestamp('2020-10-04 00:00:00'), 57: Timestamp('2020-10-04 06:00:00'), 58: Timestamp('2020-10-04 12:00:00'), 59: Timestamp('2020-10-04 18:00:00'), 60: Timestamp('2020-10-05 00:00:00')}, '2m_temp_prod': {0: 299.346777266481, 1: 294.0395117035824, 2: 292.9592738522704, 3: 301.3180464757325, 4: 300.62356652087135, 5: 295.3372490145483, 6: 293.70255086586366, 7: 301.74835531223954, 8: 300.63094530701716, 9: 295.19553201608596, 10: 293.61613871139605, 11: 302.1631229776387, 12: 300.9153730135594, 13: 295.15968865817507, 14: 293.4150837111033, 15: 301.41874976967574, 16: 300.2591302298784, 17: 294.35648855874496, 18: 292.60893943975975, 19: 300.69793228145136, 20: 299.21051997362474, 21: 293.03793188187217, 22: 290.7864320360987, 23: 298.83351270175194, 24: 297.3528693941268, 25: 291.19369512544074, 26: 289.09521928196455, 27: 297.6441935083638, 28: 296.7296754953959, 29: 290.9897312443865, 30: 289.32126319033677, 31: 298.7574828448876, 32: 298.12901959834915, 33: 292.5899489699376, 34: 290.89859256270717, 35: 300.43330551865887, 36: 299.4213926560918, 37: 293.6473005538043, 38: 291.78953606425546, 39: 300.96031965551913, 40: 299.8616920790521, 41: 293.9476866306047, 42: 292.00448821963647, 43: 301.2204786022793, 44: 300.1545728526989, 45: 294.30968496479613, 46: 292.3264718663577, 47: 301.6422264431679, 48: 300.6382119018213, 49: 294.9066383821488, 50: 292.9206232319892, 51: 302.28532470110673, 52: 301.118337633183, 53: 295.580361365072, 54: 293.5071232611944, 55: 302.4993713158521, 56: 301.1771411161832, 57: 295.87429820309063, 58: 293.8387870006977, 59: 302.3844741742686, 60: 300.92076629492163}, '2m_temp_area': {0: 299.79923425166567, 1: 294.4433522483179, 2: 293.1829305163771, 3: 301.76751592578194, 4: 300.97964970416314, 5: 295.58816311209137, 6: 293.944118250348, 7: 302.20448177813586, 8: 301.0782745090335, 9: 295.36833103932497, 10: 293.7448705435944, 11: 302.2414068531493, 12: 300.97154909133104, 13: 295.09171791304016, 14: 293.29872586829305, 15: 301.63398450993316, 16: 300.39729350367077, 17: 294.4765532352668, 18: 292.6348308697987, 19: 300.7196467769189, 20: 299.2413397435659, 21: 293.1571305856655, 22: 290.9298399188299, 23: 299.0361571649767, 24: 297.6784967259681, 25: 291.6225850820778, 26: 289.5307387179231, 27: 298.1675193109706, 28: 297.2851193736129, 29: 291.6047803054954, 30: 289.8725165929944, 31: 299.2259541567033, 32: 298.5645974740215, 33: 292.9844928941141, 34: 291.16692080415885, 35: 300.6640689360243, 36: 299.63105315816887, 37: 293.7973759485704, 38: 291.8748714049971, 39: 301.07558737962773, 40: 299.9769492884242, 41: 294.06556034682825, 42: 292.0989825175383, 43: 301.3224275326778, 44: 300.2429318269633, 45: 294.4016189433437, 46: 292.39193470959646, 47: 301.691478296914, 48: 300.693790365317, 49: 294.95729295702677, 50: 292.94815058578274, 51: 302.1922658603409, 52: 301.01878139937173, 53: 295.47413908911483, 54: 293.41960123543845, 55: 302.34370446075303, 56: 301.05227283650527, 57: 295.72013507339597, 58: 293.6867376233815, 59: 302.19133411599717, 60: 300.81799340051333}, 'total_precip_prod': {0: 0.0, 1: 0.19106968995229195, 2: 0.1557650112297922, 3: 0.42176822127339436, 4: 0.3635719686978164, 5: 0.624238127750141, 6: 0.7363658332723646, 7: 0.6637602529624484, 8: 0.8303668371501847, 9: 0.9645353650727154, 10: 0.9080621631493283, 11: 0.7407109615632305, 12: 1.2188155467167008, 13: 1.4934816133864144, 14: 0.8673540204216558, 15: 0.4536446670226782, 16: 0.5838893851141779, 17: 0.28997017910749373, 18: 0.396575809101194, 19: 0.3017425722928852, 20: 0.2600037974259506, 21: 0.10090977019496428, 22: 0.1120663639424084, 23: 0.11820662603244433, 24: 0.11351422163952127, 25: 0.0354462928350286, 26: 0.08973231687769569, 27: 0.11707786940722151, 28: 0.07097838855834729, 29: 0.03411315769121203, 30: 0.09051350215127027, 31: 0.11314915610119855, 32: 0.14753233086329737, 33: 0.1845242398275337, 34: 0.2518174918229658, 35: 0.17011312187047897, 36: 0.2749232044764252, 37: 0.2972017724997405, 38: 0.3552475267861772, 39: 0.27943871692889416, 40: 0.31981605728486306, 41: 0.19735958986038185, 42: 0.2806487307465678, 43: 0.2830918175327961, 44: 0.3288561686915008, 45: 0.1744303376099874, 46: 0.30609645936303326, 47: 0.21925050665230758, 48: 0.20281755796768022, 49: 0.06620804878284778, 50: 0.17684099550656973, 51: 0.19853145136367492, 52: 0.2563854573673008, 53: 0.24201876323456878, 54: 0.41939251801295807, 55: 0.36402178359658277, 56: 0.37120895070913373, 57: 0.281792653746079, 58: 0.5868870658107626, 59: 0.4927117680726645, 60: 0.5223743530274055}, 'total_precip_area': {0: 0.0, 1: 0.2869521154242563, 2: 0.21660564402622137, 3: 0.4856913604264373, 4: 0.5011640941544891, 5: 0.7562519498474788, 6: 0.7839821183163472, 7: 0.5862595162666312, 8: 0.8974715199444484, 9: 0.9610750641626696, 10: 0.7601911282379429, 11: 0.793906823631679, 12: 1.2383530336279156, 13: 1.0049543280590305, 14: 0.6820852351772055, 15: 0.442434189821785, 16: 0.6589929874909368, 17: 0.32723035127408134, 18: 0.4144798865599254, 19: 0.368782410513661, 20: 0.36137157927969976, 21: 0.1635789497829729, 22: 0.16409778482825316, 23: 0.16768421904602382, 24: 0.1808376986943956, 25: 0.058153150056705245, 26: 0.1269072928484502, 27: 0.14562713451681256, 28: 0.11216762073388148, 29: 0.062161294677683845, 30: 0.13994272590442386, 31: 0.1662560753829063, 32: 0.20624170840852787, 33: 0.216927525300605, 34: 0.26804054777036235, 35: 0.20587583527311556, 36: 0.297848309035157, 37: 0.2836083045675833, 38: 0.33686407205543173, 39: 0.276288892940258, 40: 0.3569925386418611, 41: 0.2258142673918131, 42: 0.30458249604018844, 43: 0.2882872466330577, 44: 0.36861110970625127, 45: 0.1945528585156628, 46: 0.2996099093542968, 47: 0.2370841370242934, 48: 0.24429531409451738, 49: 0.09534765734716107, 50: 0.19399822393477686, 51: 0.24311804406545334, 52: 0.3062432174815857, 53: 0.27031885272433986, 54: 0.40763842665734645, 55: 0.3546261915245615, 56: 0.4085152708749088, 57: 0.30056439476727764, 58: 0.5493651343645845, 59: 0.4937984226857489, 60: 0.531137675746978}}),
          'soybeans':pd.DataFrame({'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-20 06:00:00'), 2: Timestamp('2020-09-20 12:00:00'), 3: Timestamp('2020-09-20 18:00:00'), 4: Timestamp('2020-09-21 00:00:00'), 5: Timestamp('2020-09-21 06:00:00'), 6: Timestamp('2020-09-21 12:00:00'), 7: Timestamp('2020-09-21 18:00:00'), 8: Timestamp('2020-09-22 00:00:00'), 9: Timestamp('2020-09-22 06:00:00'), 10: Timestamp('2020-09-22 12:00:00'), 11: Timestamp('2020-09-22 18:00:00'), 12: Timestamp('2020-09-23 00:00:00'), 13: Timestamp('2020-09-23 06:00:00'), 14: Timestamp('2020-09-23 12:00:00'), 15: Timestamp('2020-09-23 18:00:00'), 16: Timestamp('2020-09-24 00:00:00'), 17: Timestamp('2020-09-24 06:00:00'), 18: Timestamp('2020-09-24 12:00:00'), 19: Timestamp('2020-09-24 18:00:00'), 20: Timestamp('2020-09-25 00:00:00'), 21: Timestamp('2020-09-25 06:00:00'), 22: Timestamp('2020-09-25 12:00:00'), 23: Timestamp('2020-09-25 18:00:00'), 24: Timestamp('2020-09-26 00:00:00'), 25: Timestamp('2020-09-26 06:00:00'), 26: Timestamp('2020-09-26 12:00:00'), 27: Timestamp('2020-09-26 18:00:00'), 28: Timestamp('2020-09-27 00:00:00'), 29: Timestamp('2020-09-27 06:00:00'), 30: Timestamp('2020-09-27 12:00:00'), 31: Timestamp('2020-09-27 18:00:00'), 32: Timestamp('2020-09-28 00:00:00'), 33: Timestamp('2020-09-28 06:00:00'), 34: Timestamp('2020-09-28 12:00:00'), 35: Timestamp('2020-09-28 18:00:00'), 36: Timestamp('2020-09-29 00:00:00'), 37: Timestamp('2020-09-29 06:00:00'), 38: Timestamp('2020-09-29 12:00:00'), 39: Timestamp('2020-09-29 18:00:00'), 40: Timestamp('2020-09-30 00:00:00'), 41: Timestamp('2020-09-30 06:00:00'), 42: Timestamp('2020-09-30 12:00:00'), 43: Timestamp('2020-09-30 18:00:00'), 44: Timestamp('2020-10-01 00:00:00'), 45: Timestamp('2020-10-01 06:00:00'), 46: Timestamp('2020-10-01 12:00:00'), 47: Timestamp('2020-10-01 18:00:00'), 48: Timestamp('2020-10-02 00:00:00'), 49: Timestamp('2020-10-02 06:00:00'), 50: Timestamp('2020-10-02 12:00:00'), 51: Timestamp('2020-10-02 18:00:00'), 52: Timestamp('2020-10-03 00:00:00'), 53: Timestamp('2020-10-03 06:00:00'), 54: Timestamp('2020-10-03 12:00:00'), 55: Timestamp('2020-10-03 18:00:00'), 56: Timestamp('2020-10-04 00:00:00'), 57: Timestamp('2020-10-04 06:00:00'), 58: Timestamp('2020-10-04 12:00:00'), 59: Timestamp('2020-10-04 18:00:00'), 60: Timestamp('2020-10-05 00:00:00')}, '2m_temp_prod': {0: 299.4681144428137, 1: 294.4593329079582, 2: 293.54097959722486, 3: 301.26850218370805, 4: 300.4714986353434, 5: 295.6384695410705, 6: 294.2218375466852, 7: 301.7426496375417, 8: 300.4512511041961, 9: 295.3463775610583, 10: 294.00147574962756, 11: 302.04475406462933, 12: 300.7236658622478, 13: 295.24334771914255, 14: 293.7074020631231, 15: 301.7624504225804, 16: 300.4964931687989, 17: 294.75437504400884, 18: 293.1177542350017, 19: 301.0425274988938, 20: 299.46808452778663, 21: 293.52076913001173, 22: 291.3670613175431, 23: 299.3793965992101, 24: 297.7263093286383, 25: 291.7095202331552, 26: 289.6578323905783, 27: 298.15977187729777, 28: 296.9884342085861, 29: 291.43100183368114, 30: 289.77806100941024, 31: 299.00450242361666, 32: 298.15618404166, 33: 292.73800154126627, 34: 291.07457059787265, 35: 300.5683567053199, 36: 299.3708029435806, 37: 293.67890398828234, 38: 291.954942552734, 39: 301.1051505527471, 40: 299.7999782544342, 41: 294.0840368998602, 42: 292.31118300204673, 43: 301.3976538328202, 44: 300.07823191309984, 45: 294.45023381986016, 46: 292.62675527729584, 47: 301.7900197148812, 48: 300.5590082986463, 49: 294.9896801203776, 50: 293.1241761449157, 51: 302.36329836985607, 52: 300.97122596719737, 53: 295.59237808816266, 54: 293.67785157848175, 55: 302.64353699591527, 56: 301.1035750112269, 57: 295.9278212054364, 58: 294.0324357819224, 59: 302.4832018963981, 60: 300.8427400317463}, '2m_temp_area': {0: 299.4903718737801, 1: 294.2924835295078, 2: 293.30135473218274, 3: 301.3528640298525, 4: 300.5939881510472, 5: 295.70744811622785, 6: 294.2521907610824, 7: 301.7100774359669, 8: 300.44506163325167, 9: 295.238423311095, 10: 293.8509583022139, 11: 301.6235104014979, 12: 300.38743669809435, 13: 294.8808530776623, 14: 293.33325543225476, 15: 301.4149251854487, 16: 300.1796642776425, 17: 294.39239805130165, 18: 292.66981534530925, 19: 300.5419360845211, 20: 299.0580229759339, 21: 293.0690025289753, 22: 290.9169097601789, 23: 298.92199569749033, 24: 297.4673382419046, 25: 291.4599993026732, 26: 289.452388873785, 27: 297.98953222540143, 28: 296.98633186869347, 29: 291.4589865652578, 30: 289.8288914753008, 31: 298.94272407170354, 32: 298.23250648648224, 33: 292.83814534455996, 34: 291.11886718509857, 35: 300.40881750455577, 36: 299.31958687273186, 37: 293.607006890439, 38: 291.81444341023143, 39: 300.8265637430714, 40: 299.6454967052681, 41: 293.9106555122605, 42: 292.1023114379392, 43: 301.12502226064896, 44: 299.91897396641514, 45: 294.27870082533354, 46: 292.4308511036389, 47: 301.51583391071864, 48: 300.39429493794523, 49: 294.825486042682, 50: 292.93778771753085, 51: 302.0071005199438, 52: 300.74239613744925, 53: 295.38249105817647, 54: 293.45710875169135, 55: 302.25559951138456, 56: 300.8353769061142, 57: 295.6525398583873, 58: 293.7632451527435, 59: 302.0551372494585, 60: 300.54910101224283}, 'total_precip_prod': {0: 0.0, 1: 0.4344171852327147, 2: 0.4351379346608463, 3: 0.9091314020100694, 4: 0.7838464939768977, 5: 1.0303630570555136, 6: 1.168093427310163, 7: 0.8635649194545677, 8: 1.180842617204555, 9: 1.0926651254176625, 10: 0.8283334033945278, 11: 0.8444548557416743, 12: 1.3230640130302405, 13: 1.2194759096975982, 14: 0.7328129706460099, 15: 0.47450659159057845, 16: 0.5808363103089833, 17: 0.28338951318682726, 18: 0.39698079867625957, 19: 0.37495920568614616, 20: 0.33256622409109604, 21: 0.09931783596352596, 22: 0.1293731106563246, 23: 0.14798406577292791, 24: 0.18096669978617885, 25: 0.05295233242627148, 26: 0.11851136022355316, 27: 0.12519627617895362, 28: 0.09146508542790638, 29: 0.04829302677559146, 30: 0.11041590211762027, 31: 0.14573868900912046, 32: 0.18215252985155908, 33: 0.18280908457277276, 34: 0.2248243307367063, 35: 0.17947363978224146, 36: 0.2924242956937053, 37: 0.2586747544378083, 38: 0.33937087683999867, 39: 0.2928781027298378, 40: 0.3935333755687144, 41: 0.2365752557775799, 42: 0.3215975487263272, 43: 0.32446922789494864, 44: 0.40520923133523234, 45: 0.18850232039108583, 46: 0.3206818541123286, 47: 0.2592275400999963, 48: 0.2610206474998234, 49: 0.0825337926678261, 50: 0.19092392007472064, 51: 0.2515463341682229, 52: 0.32613213524316664, 53: 0.23563493853109554, 54: 0.4110033936434478, 55: 0.38235885945226183, 56: 0.42730548177205857, 57: 0.2815641222074818, 58: 0.5961723489376685, 59: 0.5535344292974106, 60: 0.590918096887046}, 'total_precip_area': {0: 0.0, 1: 0.3874422960619588, 2: 0.3534671039565543, 3: 0.7409486316169753, 4: 0.6940791707728421, 5: 1.050536962899086, 6: 1.1507307395821944, 7: 0.8040717430552817, 8: 1.2714251971087065, 9: 1.238737113112408, 10: 0.874670190928147, 11: 1.0056286133748165, 12: 1.4698900412759783, 13: 1.003917146674298, 14: 0.6760869472842964, 15: 0.46827391738334945, 16: 0.6192899499044445, 17: 0.30060294065641396, 18: 0.41819106385838506, 19: 0.42650150247172797, 20: 0.37798023230687594, 21: 0.13500750520245205, 22: 0.14298402753104766, 23: 0.15948345822813867, 24: 0.18379226168252366, 25: 0.06000665823151941, 26: 0.1208072573649105, 27: 0.1350174494403403, 28: 0.11033956479303804, 29: 0.06970661157888385, 30: 0.16430003817188624, 31: 0.20396331622388164, 32: 0.2434592812259675, 33: 0.2349487648431431, 34: 0.2746628172448139, 35: 0.2223445586696201, 36: 0.32000417926146, 37: 0.2856880861377167, 38: 0.3563173295637319, 39: 0.2961985136805571, 40: 0.39572744360892087, 41: 0.25261863325235423, 42: 0.3480723202390621, 43: 0.33450860690381784, 44: 0.40810079238884994, 45: 0.2246481215656477, 46: 0.322536138199169, 47: 0.26302935652500986, 48: 0.26877015748360655, 49: 0.10435240067851569, 50: 0.23626983714582017, 51: 0.2921901873852093, 52: 0.3573174778311772, 53: 0.2690948499009291, 54: 0.43485595266861593, 55: 0.3857033635552736, 56: 0.45008050524046406, 57: 0.31559742112580763, 58: 0.5897464914238096, 59: 0.5591084829706243, 60: 0.6031174118554716}})}

df_deltas = {'corn': pd.DataFrame({'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-21 00:00:00'), 2: Timestamp('2020-09-22 00:00:00'), 3: Timestamp('2020-09-23 00:00:00'), 4: Timestamp('2020-09-24 00:00:00'), 5: Timestamp('2020-09-25 00:00:00'), 6: Timestamp('2020-09-26 00:00:00'), 7: Timestamp('2020-09-27 00:00:00'), 8: Timestamp('2020-09-28 00:00:00'), 9: Timestamp('2020-09-29 00:00:00'), 10: Timestamp('2020-09-30 00:00:00'), 11: Timestamp('2020-10-01 00:00:00'), 12: Timestamp('2020-10-02 00:00:00'), 13: Timestamp('2020-10-03 00:00:00'), 14: Timestamp('2020-10-04 00:00:00'), 15: Timestamp('2020-10-05 00:00:00')}, '2m_temp_24hdelta_prod': {0: -0.33056551535638423, 1: -0.06352654836543402, 2: -0.276225357129493, 3: -0.7788107233764435, 4: -0.12182345812042986, 5: 0.4844870528180379, 6: -0.7795401737865336, 7: -1.3736563255451468, 8: -0.7925949910485673, 9: -0.6084065411465024, 10: -0.6532739602739552, 11: -0.5334182358612463, 12: -0.3214601096392593, 13: 0.005672046711691303, 14: 0.294874775721931, 15: 0.0}, '2m_temp_24hdelta_area': {0: -0.2942234811255382, 1: -0.06695257736951654, 2: -0.2382484006633631, 3: -0.747444491858053, 4: -0.008792915536150941, 5: 0.25843822574146474, 6: -0.8653840134962728, 7: -1.3306357244341183, 8: -0.77807373911064, 9: -0.6101878063800394, 10: -0.6602593986352374, 11: -0.5377113682438022, 12: -0.3489377042704134, 13: -0.12997682663355925, 14: 0.08031697715852158, 15: 0.0}, 'total_precip_24hdelta_prod': {0: -1.4417379991236094, 1: -3.24276961794111, 2: -1.9549294932106442, 3: 1.0805492310759035, 4: -2.8572102912370547, 5: -0.6036102993252254, 6: 0.068152851219848, 7: -0.37760433118519804, 8: -0.2182212103223477, 9: 0.14385291749053375, 10: -0.09611101762074367, 11: -0.44170367466228744, 12: -0.9926136091953488, 13: -0.26638156415402015, 14: -0.0435076228174961, 15: 0.0}, 'total_precip_24hdelta_area': {0: -0.8969484573159082, 1: -2.002193332285897, 2: -1.3265684841453602, 3: 0.5232970017014504, 4: -1.9744318826572878, 5: -0.4756557183821801, 6: 0.09401319045911638, 7: -0.2480262049680989, 8: -0.16164720991353132, 9: 0.12918646107950632, 10: -0.025385234499880355, 11: -0.37094005589542123, 12: -0.7621485373750772, 13: -0.21974376949919702, 14: -0.06387744429696394, 15: 0.0}}),
             'soybeans':pd.DataFrame({'time': {0: Timestamp('2020-09-20 00:00:00'), 1: Timestamp('2020-09-21 00:00:00'), 2: Timestamp('2020-09-22 00:00:00'), 3: Timestamp('2020-09-23 00:00:00'), 4: Timestamp('2020-09-24 00:00:00'), 5: Timestamp('2020-09-25 00:00:00'), 6: Timestamp('2020-09-26 00:00:00'), 7: Timestamp('2020-09-27 00:00:00'), 8: Timestamp('2020-09-28 00:00:00'), 9: Timestamp('2020-09-29 00:00:00'), 10: Timestamp('2020-09-30 00:00:00'), 11: Timestamp('2020-10-01 00:00:00'), 12: Timestamp('2020-10-02 00:00:00'), 13: Timestamp('2020-10-03 00:00:00'), 14: Timestamp('2020-10-04 00:00:00'), 15: Timestamp('2020-10-05 00:00:00')}, '2m_temp_24hdelta_prod': {0: -0.41072100441995785, 1: -0.11297222900273206, 2: -0.3134558546203517, 3: -0.7055797268403201, 4: -0.14038170579478787, 5: 0.2625117005223226, 6: -0.7101408224478941, 7: -1.2573241419225902, 8: -0.7906424533010389, 9: -0.661536032998284, 10: -0.6822789549363446, 11: -0.5744259308508103, 12: -0.4206210457410846, 13: -0.08431581171659296, 14: 0.2654961632050054, 15: 0.0}, '2m_temp_24hdelta_area': {0: -0.36772899690348704, 1: -0.05348366544356093, 2: -0.24183851104639115, 3: -0.6953305273210354, 4: -0.045424744173602496, 5: 0.19001500780368247, 6: -0.821935103347599, 7: -1.265563237441084, 8: -0.7328581189116925, 9: -0.6143048783236709, 10: -0.6633462127739507, 11: -0.5190203572096471, 12: -0.39498226425933547, 13: -0.10526773964830015, 14: 0.19258302497068705, 15: 0.0}, 'total_precip_24hdelta_prod': {0: -0.6776698356563055, 1: -1.7516299539550721, 2: -1.270815712012518, 3: 0.5996647217068156, 4: -2.2466045890287396, 5: -0.6706621597096377, 6: 0.06719919310410405, 7: -0.3572052717181586, 8: -0.2512178851633781, 9: 0.1313636195701381, 10: 0.08179245850142033, 11: -0.3036658888458674, 12: -0.8200237460316371, 13: -0.32927495598480583, 14: -0.08189579932441349, 15: 0.0}, 'total_precip_24hdelta_area': {0: -0.7530386453128719, 1: -1.7027556154743797, 2: -1.0907657669920294, 3: 0.429094034006764, 4: -1.9424324271143407, 5: -0.5370968484676638, 6: 0.044404490985521246, 7: -0.30794153270377544, 8: -0.2471378005907392, 9: 0.1212115468745879, 10: 0.07486462848670472, 11: -0.3507116185903665, 12: -0.7247205225779287, 13: -0.25431240691233936, 14: -0.06960793926681186, 15: 0.0}})}

# managed indexes
df_vals['corn'].set_index('time', inplace=True)
df_vals['soybeans'].set_index('time', inplace=True)
df_deltas['corn'].set_index('time', inplace=True)
df_deltas['soybeans'].set_index('time', inplace=True)

# Dash app setup
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

# controls
controls = dbc.Card(
    [    dbc.FormGroup(
            [
                dbc.Label("Crop"),
                dcc.Dropdown(
                    id="Crop",
                    options=[
                        {"label": col, "value": col} for col in list(df_vals.keys())
                    ],
                    value=list(df_vals.keys())[0],
                    clearable=False,
                ),
            ]
        ),    
        
        
        
        dbc.FormGroup(
            [
                dbc.Label("df_vals"),
                dcc.Dropdown(
                    id="val_cols",
                    options=[
                        {"label": col, "value": col} for col in df_vals[list(df_vals.keys())[0]].columns
                    ],
                    value=df_vals[list(df_vals.keys())[0]].columns[0],
                    clearable=False,
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("df_deltas"),
                dcc.Dropdown(
                    id="delta_cols",
                    options=[
                        {"label": col, "value": col} for col in df_deltas[list(df_deltas.keys())[0]].columns
                    ],
                    value=df_deltas[list(df_deltas.keys())[0]].columns[0],
                    clearable=False
                ),
            ]
        ),

    ],
    body=True,
)

# Layout
app.layout = dbc.Container(
    [
        html.H1("Plotly Dash"),
        html.Hr(),
        dbc.Row([
            dbc.Col([
                dbc.Row([
                    dbc.Col(controls)
                ],  align="start"), 
                dbc.Row([
                    dbc.Col([
                        html.Br(),
                        dbc.Row([
                            dbc.Col([html.Div(id = 'txt1')
                            ])
                        ]),
                        html.Br(),
                        dbc.Row([
                            dbc.Col([html.Div(id = 'txt2')])
                        ])
                    ])
                ])
            ],xs = 4)
            ,
            dbc.Col([
                dbc.Row([
                    dbc.Col([html.Div(id = 'plot_title')],)
                ]),
                dbc.Row([
                    dbc.Col(dcc.Graph(id="crop-graph")),
                    #dbc.Col(dcc.Graph(id="cluster-graph"))
                ])
            ])
        ],), 
    ],
    fluid=True,
)

@app.callback(
    Output("crop-graph", "figure"),
    [   Input("Crop", "value"),
        Input("val_cols", "value"),
        Input("delta_cols", "value"),

        #Input("cluster-count", "value"),
    ],
)
def crop_graph(Crop, val, delta):

    # plotly figure setup
    fig = make_subplots(specs=[[{"secondary_y": True}]])
   
    # traces for df_vals
    fig.add_trace(go.Scatter(name=val, x=df_vals[Crop].index, y=df_vals[Crop][val], mode = 'lines'), secondary_y=False,
                  )
    
    # traces for df_deltas
    fig.add_trace(go.Scatter(name=delta, x=df_deltas[Crop].index, y=df_deltas[Crop][delta], mode = 'lines'), secondary_y=True,
                  )
    # aesthetics
    fig.update_layout(template="plotly_dark", plot_bgcolor='#272B30', paper_bgcolor='#272B30')
    fig.update_layout(margin= {'t':150, 'b':0, 'r': 0, 'l': 0, 'pad': 0})
    fig.update_layout(hovermode = 'x')
    fig.update_layout(showlegend=True, legend=dict(x=1,y=0.85))
    fig.update_layout(title = dict(text = 'Crop: '+ Crop + ', Vals: ' + val + ', Deltas: '+delta))
    return(fig)


app.run_server(mode='external', port = 8099)