剧情背景图片答案

【问题标题】：Plotly background images剧情背景图片
【发布时间】：2018-05-01 05:02:23
【问题描述】：

我正在尝试使用 plotly 在我的图表上获取背景图像。如果不使用其中一个 images.plot.ly 链接，我似乎无法显示任何图像。我在与项目相同的文件夹中尝试了 Web URL 和本地图像。这就是我使用他们教程中的图片 URL 时显示的内容：

https://plot.ly/python/images/

这是我唯一一次可以让任何东西出现。任何其他链接都不会在图表上产生任何内容。有小费吗？我已经为此搜索了高低。

layout = dict(title = 'Crime Cluster Statistics',
                  yaxis = dict(zeroline = False),
                  xaxis = dict(zeroline = False),
                  images= [dict(
                      source= "https://images.plot.ly/language-icons/api-home/python-logo.png",
                      xref= "x",
                      yref= "y",
                      x= 0,
                      y= 3,
                      sizex= 150000,
                      sizey= 150000,
                      sizing= "stretch")]
                 )

我真正想要的是在图像的背景上放置一张美国州的图像，因为这些点应该代表该州的 GPS 坐标处的事件。但除了这张之外，我似乎无法将任何图像加载到背景中。

【问题讨论】：

标签： python background-image plotly

【解决方案1】：

我也在尝试这样做（读取本地图像并将其作为绘图图中的背景）并一直使用它（可能是因为我对整个图像的事情还很陌生并且也在尝试了解 base64 编码）。这是我在 Jupyter 笔记本中使用 plotly 离线的简单解决方案：

import base64
with open("C:/My.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode()
#add the prefix that plotly will want when using the string as source
encoded_image = "data:image/png;base64," + encoded_string

现在您的绘图图布局可能如下所示（在这种情况下 - 请记住，您正在使用图中的实际数据范围来放置图像，因此 x 和 Y 必须在合适的范围）：

"layout": Layout(title='Graph Title', 
                 yaxis=dict(title='Y Label'), 
                 xaxis=dict(title='X Label'),
                 images=[dict(
                  source= encoded_image,
                  xref= "x",
                  yref= "y",
                  x= 0,
                  y= 10,
                  sizex= 20,
                  sizey= 10,
                  sizing= "stretch",
                  opacity= 0.7,
                  layer= "below")])

【讨论】：

layer="below" 真的帮助了我。

【解决方案2】：

如果这有助于其他人寻找如何将本地图像用作情节背景，这就是我用来使其工作的方法：

figure = {'data': data,
          'layout': {'xaxis': {'range': [-800, 800], 'autorange': False, 'dtick':100, 'title':'South'},
                     'yaxis': {'range': [-800, 800], 'autorange': False, 'dtick':100,'title': 'West (km)'},
                     'title': 'Sample LEO1 Main-Lobe Ground Contour (4.5 deg)',
                     'autosize':False, 'width':1.5*437, 'height':1.5*615,
                     'images': [{'source': "C:\\map.jpg",                          
                                 'sizing': 'stretch', 'xref': 'paper', 'yref': 'paper', 'x':0,'y':1, 'layer':'below',
                                 'sizex':1,'sizey':1,'opacity':1
                                }]                     
                    },                                        
         }

... 其中“数据”之前设置为图形对象。

【讨论】：