python 将 matplotlib 图形添加到网页中

Question

我已经阅读了以下内容 从 JavaScript 代码调用 Python 函数

国际刑警组织.py

import numpy as np
from math import sqrt
import matplotlib.pyplot as plt

def interpol(x0, x, y):
    x = np.asfarray(x)
    y = np.asfarray(y)
    ....
    return f0

if __name__ == '__main__':

    x = [-5,-4.19,-3.54,-3.31,-2.56,-2.31,-1.66,-0.96,-0.22,0.62,1.21]
    y = [0.01,0.01,0.03,0.04,0.07,0.09,0.16,0.28,0.45,0.65,0.77]
    plt.scatter(x, y)
    x_new = np.linspace(-6, 2)
    plt.plot(x_new, interpol(x_new, x, y)) #output the figure

    plt.show()

这个Python代码输出一个数字。

我想从

x

获取

y

和

html input

数组，并将它们提供给 python 代码（在本示例中，我在 python 中使用 x 和 y，但我想从

html input

获取它们），并将python图形输出到网页中。

我知道我必须使用服务器，并且我想使用

jQuery.ajax()

。

Answer 1

免责声明：这是一个非常广泛的问题，我只能给出一个非常高水平的答案。

您有不同的策略

“将 matplotlib 图形添加到网页中”

1. 将 matplotlib 图形保存为 svg/png 格式并将其包含在渲染的网页中，

   plt.savefig("test.svg", format="svg")

   。
   • 优点：简单，客户端代码不需要高级 JS（实际上根本不需要使用 javascript 就可以完成）
   • 缺点：客户端 UI 将无法交互。
2. 通过例如 mpld3 将图形转换为 JSON 对象，并使用 D3.js 在客户端代码中渲染它们。
   • 优点：这将允许您在客户端拥有交互式图表。
   • 缺点：比第一个选项复杂一点。
3. 奖励：对于更高级的图表，您可以直接在Python级别使用

   altair

   来生成图表。 https://altair-viz.github.io/ 并通过 vega-embed 在客户端级别渲染它们。有关更多详细信息：https://altair-viz.github.io/user_guide/display_frontends.html

Answer 2

添加到之前的答案，您可以将图形作为图像保存到 ByteIO 流中。然后将其作为图像。这避免了必须使用临时文件。另一种选择是使用提供出色交互性的 Plotly 库。