python - 将图像放置在绘图图中
问题描述
我有一些汽车型号及其价格的数据,我在 x 轴上绘制了一个图表作为汽车型号,在 y 轴上绘制了它们的价格,如下面的图 1 所示。从图中可以看出,我也在情节中的对应点放置了汽车模型的图像。
我正在使用以下代码绘制图表:
# define the range
min_value = cars_df['onroad_price'].min()
max_value = cars_df['onroad_price'].max()
lt = go.Layout(yaxis=dict(range=[int(min_value)-ylimit, int(max_value)+ 20000]))
# Create figure
fig = go.Figure(layout=lt)
# Add trace
for mx in plot_points_vertically_models:
fig.add_trace(mx)
for xname, name_of_image_in_folder, variant_name in zip(images_label_list, image_name, list(model_and_price_dct.keys())):
fig.add_layout_image(
dict(
x=xname,
xanchor = "center",
sizex=200000,
y=min(model_and_price_dct[variant_name]),
sizey=ysize,
xref="x",
yref="y",
opacity=1.0,
layer="above",
sizing="contain",
source=Image.open(f'image_path/{name_of_image_in_folder}.png')
)
)
当 xaxis 上的汽车型号数量为 6 或以上时,该代码可以正常工作。但是当汽车模型的数量低于 6 时,代码无法在图表中显示任何图像,而只是绘制点。要查看图像,我必须将 add_layout_image 中的 xanchor 更改为“left”。但是这个地方的图像与对应的点有一点偏移,如下面的图 2 所示。
关于可能出了什么问题的任何想法?如何将图像正确放置在中心?
提前致谢
解决方案
推荐阅读
- html - 手机上的图片滑块
- vue.js - Vue路由器导航在一页应用程序v-navigation-drawer上可滚动时有间隙
- javascript - React、HTML 和 JavaScript:错误:超出最大更新深度
- python - 计算 Pandas DataFrame 中每个组的状态变化
- c# - 如何在使用 EF Core 进行 API 响应后向数据库添加翻译?
- python - 如何在我的网站上管理奇怪的字体?
- c# - 无法执行 Cookie 身份验证:SignInAsync 和 AuthenticateAsync 不成功
- php - 如何根据索引php合并两个数组?
- javascript - 为什么将异步等待放在数组映射回调中?
- postgresql - 使用 postgresql 和 typeorm 命令获取 100km 内的实体