Django 运行 Python 脚本并将输出传递给 javascript 文件

Posted 2023-02-24

【中文标题】Django 运行 Python 脚本并将输出传递给 javascript 文件

【英文标题】：Django Run Python script and Pass output to javascript file

【发布时间】：2016-10-26 04:54:10

【问题描述】：

我是 Django 新手

我需要什么：

1 - 运行 python 脚本 2 - 将数据传递给 javascript 文件

我不知道我所构建的句子在 Django 方面是否在技术上是正确的。

以下分别是javascript代码和python代码

var trace2 = 
    x: [-0.100387678599, -0.841098362432, -0.086900337279, -0.418153015989, -0.197122458852, 0.0391933774019, -0.759329967599, -1.29266640992, 0.950624526622, 1.52725553555, 2.25231901948, 1.84936962902, 0.833618714205, 2.42998331172, 1.73583322891, 3.19694965552, -0.909512478385, 0.983932265051, -0.992449424459, 2.349425425, -1.60550784046, 2.68216122416, 2.22665169157, -0.775707830008, 0.569030921894, 0.310849282625, 2.39935206131, -1.66045702411, 3.76747878057, 3.05333459172, -3.35932368186, 3.43730482552, -3.07611001807, -0.842850343527, 3.50008556345, 0.165085596719, -0.339561268287, -1.74747448536, 3.56148886503, 1.8353330132, -1.90428086596, -0.912688959871, -2.37825362991],
    y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
    z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
    text: ["size:4",  "size:9",  "size:6",  "size:5",  "size:1",  "size:1",  "size:5",  "size:6", "size:10",  "size:1", "size:11",  "size:5", "size:11",  "size:8",  "size:4",  "size:2",  "size:9",
            "size:11", "size:9",  "size:9",  "size:4",  "size:2",  "size:7",  "size:6",  "size:3",  "size:4",  "size:3",  "size:5", "size:10",  "size:9",  "size:3",  "size:7",  "size:5",  "size:5",
            "size:10",  "size:4",  "size:3",  "size:1",  "size:7", "size:11",  "size:5",  "size:3",  "size:4"],
    mode: 'markers',
    marker: 
        color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
        size: [ 4,  9,  6,  5,  1,  1,  5,  6, 10,  1, 11,  5, 11,  8,  4,  2,  9,
                11,  9,  9,  4,  2,  7,  6,  3,  4,  3,  5, 10,  9,  3,  7,  5,  5,
                10,  4,  3,  1,  7, 11,  5,  3,  4],
        symbol: 'circle',
        line: 
            color: 'rgb(204, 204, 204)',
            width: 1
        ,
        opacity: 0.9
    ,
    type: 'scatter3d',
    ;
var data = [trace2];
var layout = margin: 
    l: 0,
    r: 0,
    b: 0,
    t: 0
,
  showlegend : true;
    Plotly.newPlot('myDiv', data, layout,  modeBarButtonsToRemove:     ['sendDataToCloud'], displaylogo : false );

所以我需要在 python 脚本中生成 x ,y ,z 并将这些值嵌入到 javascript 中。

下面是我的python代码：

from scipy.interpolate import griddata
import numpy as np
import matplotlib.pyplot as plt
from matplotlib import cm
from mpl_toolkits.mplot3d import Axes3D

x = np.random.random(100)
y = np.random.random(100)
z = np.random.random(100)

xi=np.linspace(min(x), max(x),10)

yi=np.linspace(min(y),max(y),10)

zi = griddata((x,y), z, (xi, yi), method='linear')
X,Y= np.meshgrid(xi,yi)
Z = np.nan_to_num(griddata((x,y), z, (X, Y), method='nearest'))

fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(x, y, z)

ax.plot_surface(X, Y, Z, rstride=1, cstride=1, cmap=cm.coolwarm,
                   linewidth=0, antialiased=False)

plt.savefig('surface.pdf')

print type(Z)

print "["
for row in Z:
 print str(list(row)) + ","
print "]"

所以在关注了 cmets 之后，我得出了以下几点：

def index(request):

x = np.random.random(100)
y = np.random.random(100)
z = np.random.random(100)

xi=np.linspace(min(x), max(x),10)
yi=np.linspace(min(y),max(y),10)

zi = griddata((x,y), z, (xi, yi), method='linear')
X,Y= np.meshgrid(xi,yi)
Z = np.nan_to_num(griddata((x,y), z, (X, Y), method='nearest'))

fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(x, y, z)

ax.plot_surface(X, Y, Z, rstride=1, cstride=1, cmap=cm.coolwarm,
               linewidth=0, antialiased=False)

template = loader.get_template('polls/index.html')
context = 
    'Z' : Z,

return HttpResponse(template.render(context , request))

这就是我的观点.py

而我的 index.html 是

<div class="displaySomething">
              <script>
                var xyz_data_array =  Z 
                console.log(xyz_data_array);
              </script>
            <div>

我没有正确链接到模板的路径吗？或者有什么我需要做的吗？

【问题讨论】：

硬编码你的 x 以确保它确实在那里 ..."Z": [1,2,3] ... 然后确保你在呈现的 javascript 中看到它

【参考方案1】：

在 views.py

中

def my_view(request,...):
    ...
    render("my_template.html",context="xyz_list":[[1,2,3],[2,3,4],[4,5,6]]) 

在 my_template.html

中

...
<script>
    var xyz_data_array =  xyz_list  ;
</script>

请注意，这仅适用于数组由简单的原语组成...如果包含的数据比数字或简单字符串更复杂，这可能不起作用

【讨论】：

我试过了。 xyz_data_array 在日志中显示未定义

那么你没有将上下文发送到页面......如果你按照这个例子，它应该是[[1,2,3],[2,3,4],[4,5,6]]

哦。如何检查我的 python 脚本是否真的生成了一些输出？

Joran，在打印日志时，我正在执行以下操作：console.log( data ) 更正如下：console.log(" data ");

非常感谢您的帮助！