首页 > 解决方案 > 将 Jinja2 数据发送到另一个 js 文件——flask

问题描述

我有一个 js 文件,它用所有必要的参数绘制一个函数。我希望在 html 中做这样的事情:

<script  src="js/index2.js" value = {{GraphData}}></script>

js 文件看起来像这样

var chart = AmCharts.makeChart("chartdiv", {
  "graphs": [{
  "id": "g3",
  "valueAxis": "v1",
   ...
   }],
  "Data" = {{GraphData}} 
})

有没有办法将图形数据传输到js文件?

标签: javascriptpythonhtmlflaskjinja2

解决方案


这里对 script 标签的功能存在根本性的误解。“值”不是 HTML 脚本标签的有效属性,该标签用于将 JavaScript 文件的文本内容导入您的 HTML 文件。

要实现您想要的,您可以简单地删除:

<script src="js/index2.js" value = {{GraphData}}></script>

并将其替换为您要导入的内容:

var chart = AmCharts.makeChart("chartdiv", {
  "graphs": [{
  "id": "g3",
  "valueAxis": "v1",
  ...
  }],
  "Data" = {{GraphData}}  
})

有关 HTML 脚本标记的更多信息,请点击此处此处

如果您想将此脚本保留在外部,则可以使用它来定义一个以 {{GraphData}} 作为参数的函数,如下所示:

function graphData(gd) {
  var chart = AmCharts.makeChart("chartdiv", {
    "graphs": [{
    "id": "g3",
    "valueAxis": "v1",
    ...
    }],
    "Data" = gd  
  });
}

然后在您的 HTML 文件中调用该函数,如下所示:

<script src="js/index2.js"></script>
<script>
  graphData({{GraphData}})
</script>

推荐阅读