是否有可以呈现numpy数组数据的python plotly/dash图像小部件?
我正在评估python plotly和/或dash作为更新图像的链接绘图的bokeh/holoviews的替代方案 要求: 将数据点链接到图像: 我有散点图和热图,其中单个数据点表示从图像中得到的值。我想从散点图中的一个数据点链接回该数据点的数值来源的图像。 图像数据位于numpy数组中,或者可以通过回调函数提供。我希望避免将.png文件写入磁盘,并将png文件嵌入html元素 将图像选择链接到数据点: e、 g.显示图像。根据图像中的选择更新绘图(例如,简单的直方图) 然而,我似乎在plotly/dash中找不到任何用于图像显示的小部件。我是错过了什么,还是真的没有 我想从散点图中的一个数据点链接回该数据点的数值来源的图像 看。您可以将是否有可以呈现numpy数组数据的python plotly/dash图像小部件?,python,plotly-dash,Python,Plotly Dash,我正在评估python plotly和/或dash作为更新图像的链接绘图的bokeh/holoviews的替代方案 要求: 将数据点链接到图像: 我有散点图和热图,其中单个数据点表示从图像中得到的值。我想从散点图中的一个数据点链接回该数据点的数值来源的图像。 图像数据位于numpy数组中,或者可以通过回调函数提供。我希望避免将.png文件写入磁盘,并将png文件嵌入html元素 将图像选择链接到数据点: e、 g.显示图像。根据图像中的选择更新绘图(例如,简单的直方图) 然而,我似乎在plotl
回调
分配给dash_core_组件的selectedData
、hoverData
、或clickData
属性。图形
将图像选择链接到数据点:例如,显示图像。根据图像中的选择更新绘图(例如,简单的直方图)
您可以在plotly graph上显示背景图像,然后使用相同的selectedData
工具根据选定区域更新回调。下面是一个简单的例子:
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import base64
import json
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})
RANGE = [0, 1]
def InteractiveImage(id, image_path):
encoded_image = base64.b64encode(open(image_path, 'rb').read())
return dcc.Graph(
id=id,
figure={
'data': [],
'layout': {
'xaxis': {
'range': RANGE
},
'yaxis': {
'range': RANGE,
'scaleanchor': 'x',
'scaleratio': 1
},
'height': 600,
'images': [{
'xref': 'x',
'yref': 'y',
'x': RANGE[0],
'y': RANGE[1],
'sizex': RANGE[1] - RANGE[0],
'sizey': RANGE[1] - RANGE[0],
'sizing': 'stretch',
'layer': 'below',
'source': 'data:image/png;base64,{}'.format(encoded_image)
}],
'dragmode': 'select' # or 'lasso'
}
}
)
app.layout = html.Div([
html.Div(className='row', children=[
html.Div(InteractiveImage('image', 'dash_app.png'), className='six columns'),
html.Div(dcc.Graph(id='graph'), className='six columns')
]),
html.Pre(id='console')
])
# display the event data for debugging
@app.callback(Output('console', 'children'), [Input('image', 'selectedData')])
def display_selected_data(selectedData):
return json.dumps(selectedData, indent=2)
@app.callback(Output('graph', 'figure'), [Input('image', 'selectedData')])
def update_histogram(selectedData):
x_range = selectedData['range']['x']
x_range = selectedData['range']['y']
# filter data based off of selection in here
# for simple example purposes, we'll just display the selected RANGE
return {
'data': [{
'x': x_range,
'y': x_range,
'mode': 'markers',
'marker': {
'size': 20
}
}],
'layout': {
'xaxis': {'range': RANGE},
'yaxis': {'range': RANGE, 'scaleanchor': 'x', 'scaleratio': 1},
'height': 600
}
}
if __name__ == '__main__':
app.run_server(debug=True)
如果您仍然对以下答案感兴趣:,如果您滚动到底部,您将看到如何将其应用于Dash非常感谢提供了详细的示例。然而,这似乎需要将我可能在numpy数组中拥有的光栅数据渲染到图像文件(例如a.png)中。例如,如果我想应用查找表,我必须再次保存数据的转换版本。我想我正在寻找更像matplotlib imshow类型的光栅图像可视化小部件的东西。