Mis*_*ing 3 javascript jinja2 flask chartist.js
正如问题所述，我只是想将列表的结果（从 Flask 项目中的 main.py 文件传递）传递并渲染到 html 模板（charts.html）。问题是我试图将 jinja 变量或使用 jinja 放在脚本标签（JavaScript）而不是 html 中。我找不到任何文档或答案来告诉我如何执行此操作：
我的代码：charts.html（烧瓶中的模板）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<title>Webscraping and Charts</title>
</head>
<body>
<h1>Webscraping and Beautiful Charts</h1>
<p>{{enrolled}}</p>
<div class="ct-chart .ct-perfect-fifth"></div>
<script>
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[15, 222, 4, 2, 0]
]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>
</body>
</html>
在 h1 标签下，您会注意到：
{{已注册}}
该变量的内容在 python 文件中定义。功能如下所示。已注册=[3,200,600,1800,22000]
@app.route('/charts')
def charts():
enrolled=[3,200,600,1800,22000]
return render_template('charts.html',enrolled=enrolled)
我想要的是显示注册的内容而不是脚本标签中的现有列表。
因此，将脚本标签中的 [15, 222, 4, 2, 0] 替换为注册的内容。
我尝试过各种方法，但都行不通。
例如，我尝试将 jinja 变量放入列表中，以呈现如下所示的列表。
<script>
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[{{enrolled}}]
]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>
这是行不通的。
当尝试在 JavaScript 中使用 jinja2 将数据渲染到 html 页面时，任何人都可以建议一个解决方案，并解释最佳实践，在本例中使用 Chartist.js 列出图表的数据
更新：
我还研究了一种解决方案，涉及使用 jquery 和 ajax 来呈现结果（根本没有使用 jinja2），但这对于我想要实现的目标来说似乎过于复杂。
请在您的回答中提出最佳解决方案/替代方案，但我的主要问题是使用 jinja2 是否可以轻松实现它
我知道这是一个相对较老的问题，但由于我需要实现与@MissComputing类似的事情，所以我分享了我找到的这个解决方案。它并不漂亮，但它可以完成工作。
所以在你的情况下，你需要这样做：
<!-- This SET is just to illustrate an example data source, the data would probably come from you controller -->
{% set enrolled_data = '[3,200,600,1800,22000]' %}
<!-- place a hidden field somewhere in your template to "hold" your data -->
<input type="hidden" id="enrolled_id" value="{{ enrolled_data }}">
<!-- Now Javascript can look for the hidden field and get the data out of it -->
<script>
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
document.querySelector('#enrolled_id').value
]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>
致谢：该解决方案基于 Reddit 用户在以下帖子中的评论之一的建议： https ://www.reddit.com/r/flask/comments/aj06vb/jinja2_into_javascript/
| 归档时间： |
|
| 查看次数： |
4344 次 |
| 最近记录： |