如何直接使用Django直接显示maplotlib图而不显示为图像？

Question

我正在尝试使用Django和matplotlib绘制图形。因此，在Django模板上绘制图形时，我正在将matplotlib图形转换为png格式，并将该png文件传递给Django模板。

我的要求如下：

我想在图表上放置垂直线，使垂直线应能够在图表上左右移动。 当我们在Django模板上传递图片时，似乎无法在图形上拖动垂直线并​​获得与其对应的x值。

请提出一种方法，使我们能够拖动线条并获取其x轴值。 有没有直接方法绘制matplotlib图形而不将其作为图像传递？

这是在views.py中添加的代码：

buffer = BytesIO()
fig.savefig(buffer, format='png')
buffer.seek(0)
image_png = buffer.getvalue()
buffer.close()
graphic = base64.b64encode(image_png)
graphic = graphic.decode('utf-8')

HTML代码：

<img src="data:image/png;base64,{{ graphic|safe }}">

我想在网页上执行类似的操作。请参考图片和参考链接以获取更多详细信息： Draggable lines select one another in Matplotlib

我想添加这样的红色标记，该标记应该是可拖动的。