情节:如何使用下拉菜单选择图形源? [英] Plotly: How to select graph source using dropdown?
问题描述
我正在尝试使用Plotly和下拉图将多个可选择的图形嵌入到单个图中.我遵循了Plotly的
如何将多个图形的数据嵌入到单个图形中，以便用户可以选择要查看的图形?
使用graph_objects更新了答案:
截至
一些详细信息:
毫无疑问， Values_1 是一个长度为100的列表，其中每个元素的类型均为numpy.float.用 values_1 替换 json.dumps(values_1)，并用 values_2 替换 json.dumps(values_2)与您的问题相同的情节.这些图只是直线的原因似乎是被绘制的列表的长度，而不是列表中包含的值.或类似的东西.
设置'y'= values_1 与将单个列表分配给'y'相同.但是， updatemenus 中的'y'并不将单个列表作为参数，而是像'y'= [values_1] 中那样的列表列表代码>.为什么?因为您可能想在同一图中绘制 多个列表 ，例如'y'= [values_1，values_1b] .看看:
下拉选项Var 1的图
下拉选项Var 2的图
完整的原始代码:
以图例方式导入从plotly导入graph_objs，转到go，脱机导入po，工具po.init_notebook_mode()将numpy导入为np导入jsonx =列表(np.linspace(-np.pi，np.pi，100))值_1 =列表(np.sin(x))values_1b = [elem * -1，代表value_1中的elem]值_2 =列表(np.tan(x))values_2b = [elem * -1表示elem_2中的元素]行= go.Scatter(x = x，y = values_1)第2行= go.Scatter(x = x，y = values_1b)updatemenus = [{'纽扣': [{'method':'restyle'，'label':'Val 1'，'args':[{'y':[values_1，values_1b]}，]}，{'method':'restyle'，'label':'Val 2'，'args':[{'y':[values_2，values_2b]}，]}]，'direction':'down'，'showactive':是的，}]布局= go.Layout(updatemenus =更新菜单，)Figure = go.Figure(data = [line，line2]，layout = layout)po.iplot(图) 完整的更新代码:
#个导入随地导入plotly.graph_objects将numpy导入为np# 数据x =列表(np.linspace(-np.pi，np.pi，100))值_1 =列表(np.sin(x))values_1b = [elem * -1，代表value_1中的elem]值_2 =列表(np.tan(x))values_2b = [elem * -1表示elem_2中的元素]#绘图设置]无花果= go.Figure()#添加一条或多条痕迹fig.add_traces(go.Scatter(x = x，y = values_1))fig.add_traces(go.Scatter(x = x，y = values_1b))#构造菜单updatemenus = [{'buttons :: [{'method':'update'，'label':'Val 1'，'args':[{'y':[values_1，values_1b]}，]}，{'method':'update'，'label':'Val 2'，'args':[{'y':[values_2，values_2b]}，]}]，'direction':'down'，'showactive':是，}]#使用按钮更新布局，并显示该图fig.update_layout(updatemenus = updatemenus)图show() 具有版本4默认布局的图:
I'm trying to embed multiple, selectable graphs in a single figure using Plotly, using a dropdown figure. I followed the dropdown example from Plotly, but they only show how to change graph characteristics (like visible, or type), not the underlying data. In my situation, I have a static X-axis and want to change the Y-values. Here's a minimal working example that can be run in a jupyter notebook:
import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()
import numpy as np
import json
x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_2 = list(np.tan(x))
line = go.Scatter(
x=x,
y=values_1
)
updatemenus = [
{
'buttons': [
{
'method': 'restyle',
'label': 'Val 1',
'args': [
{'y': json.dumps(values_1)},
]
},
{
'method': 'restyle',
'label': 'Val 2',
'args': [
{'y': json.dumps(values_2)},
]
}
],
'direction': 'down',
'showactive': True,
}
]
layout = go.Layout(
updatemenus=updatemenus,
)
figure = go.Figure(data=[line], layout=layout)
po.iplot(figure)
However, while the approach seems to work like advertised for general graph attributes (like 'visible'), when I use 'y', it produces a straight line, where y goes from 0 to len(y), instead of the actual data I gave it. Here are images of the initial render, and then what happens when I select the dropdown item for the Tan(X) graph, then go back to the Sin(X):
How do I embed the data for multiple graphs into a single figure so that the user can select which one they want to view?
Updated answer using graph_objects:
As of version 4, you don't have to worry about offline versus online functionality. So drop the from plotly import graph_objs as go, offline as po and po.init_notebook_mode(), and just use import plotly.graph_objects as go. I've updated my original answer with a complete code snippet that shows the whole approach with multiple traces using plotly.graph_objects at the end. The solution to the question as it still stands will still be the same, namely:
'y' in updatemenus does not take a single list as an argument, but rather a list of lists like in 'y' = [values_1] where values_1 is a list in itself. So just replace your lines
{'y': json.dumps(values_1)},and{'y': json.dumps(values_2)},
with
{'y': [values_1]},and{'y': [values_2]},
to get these plots for the different options Val 1 and Val 2:
Some Details:
Values_1 is, unsurprisingly, a list of length 100 where each element is of type numpy.float. Replacing json.dumps(values_1) with values_1, and json.dumps(values_2) with values_2 will render the same plots as in your question. The reason why these plots are just straight lines, seems to be that it's the length of your lists that are being plotted, and not the values contained in that list. Or something to that effect.
Setting 'y' = values_1 is the same thing as assigning a single list to 'y'. But 'y' in updatemenus does not take a single list as an argument, but rather a list of lists like in 'y' = [values_1]. Why? Because you might want to plot multiple lists in the same figure like 'y' = [values_1, values_1b]. Have a look:
Plot for dropdown option Var 1:
Plot for dropdown option Var 2
Complete original code:
import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()
import numpy as np
import json
x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_1b = [elem*-1 for elem in values_1]
values_2 = list(np.tan(x))
values_2b = [elem*-1 for elem in values_2]
line = go.Scatter(
x=x,
y=values_1
)
line2 = go.Scatter(
x=x,
y=values_1b
)
updatemenus = [
{
'buttons': [
{
'method': 'restyle',
'label': 'Val 1',
'args': [
{'y': [values_1, values_1b]},
]
},
{
'method': 'restyle',
'label': 'Val 2',
'args': [
{'y': [values_2, values_2b]},
]
}
],
'direction': 'down',
'showactive': True,
}
]
layout = go.Layout(
updatemenus=updatemenus,
)
figure = go.Figure(data=[line, line2], layout=layout)
po.iplot(figure)
Complete updated code:
# imports
import plotly.graph_objects as go
import numpy as np
# data
x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_1b = [elem*-1 for elem in values_1]
values_2 = list(np.tan(x))
values_2b = [elem*-1 for elem in values_2]
# plotly setup]
fig = go.Figure()
# Add one ore more traces
fig.add_traces(go.Scatter(x=x, y=values_1))
fig.add_traces(go.Scatter(x=x, y=values_1b))
# construct menus
updatemenus = [{'buttons': [{'method': 'update',
'label': 'Val 1',
'args': [{'y': [values_1, values_1b]},]
},
{'method': 'update',
'label': 'Val 2',
'args': [{'y': [values_2, values_2b]},]}],
'direction': 'down',
'showactive': True,}]
# update layout with buttons, and show the figure
fig.update_layout(updatemenus=updatemenus)
fig.show()
Plot with version 4 default layout:
这篇关于情节:如何使用下拉菜单选择图形源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
