Javascript 将变量传递到html文件的Python烧瓶在脚本标记下不起作用

我有一个python flask应用程序，我需要它来创建java脚本条形图。我已经尝试了各种方法，我知道我的变量正在被传递到html文件中，因为我已经将它们移动到html文件中的其他位置，并且可以正常工作。我需要将这些变量传递到html文件中的script标记下。我对所有这些都不熟悉，我是否需要做一些特殊的处理来显示我的变量，以便构建图表

不确定这是否重要，但我传递的变量只是一个日期和数字

# this is my python route that calls a function that fetches a date and a 
# number from mongodb. This data im trying to display in my graph.
@app.route('/meritgraph/')
def meritgraph():

score_graph_data, score_date = get_chart_data()

return render_template("graphing.html", chart_data=zip(score_date, 
score_graph_data))



# This is working for me but I want this to run inside a javascript tag.
<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

# for the example above I get the following return output.

Wed May 24 18:11:01 PDT 2017 and 100
Tue May 23 14:39:27 PDT 2017 and 77
Tue May 23 14:14:02 PDT 2017 and 62

# This is what I would like to do inside the script tag. Some reason when I 
# run it inside the script tag it wont work. Is there anything special I 
# need to do here?
<script type="text/javascript">

<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

</script>

#这是我的python路线，它调用一个函数，该函数获取日期和日期
#来自mongodb的号码。我试图在图表中显示这些数据。
@app.route（“/meritgraph/”）
def meritgraph（）：
得分图数据，得分日期=获取图表数据（）
返回渲染模板（“graphing.html”，chart\u data=zip（score\u date，
分数（图形（数据））
#这对我来说是可行的，但我希望它在javascript标记中运行。
{对于分数\日期，分数\图表\数据%中的分数\图表\数据%}
{{score_date}安全}和{{score_graph_data}
{%endfor%}
{%endblock%}
#对于上面的示例，我得到以下返回输出。
2017年5月24日星期三18:11:01 PDT和100
2017年5月23日星期二14:39:27 PDT和77
2017年5月23日星期二14:14:02 PDT和62
#这就是我想在script标签中做的事情。当我
#在脚本标签中运行它，它将不起作用。我有什么特别的吗
#你需要在这里做什么？
{对于分数\日期，分数\图表\数据%中的分数\图表\数据%}
{{score_date}安全}和{{score_graph_data}
{%endfor%}
{%endblock%}

您的逗号有点乱。试试下面的方法。如果这不起作用，请提供更多关于您所遇到错误的信息（可能是在JavaScript执行中）

AmCharts.makeChart（“chartdiv”，
{
“类型”：“串行”，
“类别字段”：“类别”，
“数据日期格式”：“YYYY-MM-DD”，
“起始持续时间”：1，
“主题”：“黑暗”，
“分类法”：{
“网格位置”：“开始”，
“parseDates”：true
},
“图表光标”：{
“已启用”：真
},
“图表滚动条”：{
“已启用”：真
},
“趋势线”：[]，
“图表”：[
{
“填充字母”：1，
“id”：“AmGraph-1”，
“标题”：“图1”，
“类型”：“列”，
“valueField”：“第1列”
}
],
“指南”：[]，
“价值轴”：[
{
“id”：“ValueAxis-1”，
“标题”：“得分范围”
}
],
“所有标签”：[]，
“气球”：{}，
“头衔”：[
{
“id”：“标题1”，
“尺寸”：15，
“正文”：“优异成绩表”
}
],
“数据提供者”：[
{对于分数\日期，分数\图表\数据%中的分数\图表\数据%}
{
“类别”：“{score_date{124; safe}}”，
“第1列”：“{score\u graph\u data}”
}
{{”，“如果不是loop.last}
{%endfor%}
]
}
);

根据以下示例，尝试更改jinja脚本中的语法：

---

{{score\u date}

到

karthick是对的，至少以我的经验来看，脚本标记中的jinja需要加引号。除此之外，您不应该将html标记放在脚本标记中，您应该使用document.all或document.getElementById函数。

尝试用引号“{score\u date}”{{{score\u graph\u data}}”换行不起作用。我试过了，但还是一样。我看到了图表背景，但图表数据没有传递。引号有什么问题吗？我像这样给出了“dataProvider”：[{“category”：“{score_date}}”，“column-1”：“{{score_graph_data}}}}，]不，对不起，我尝试了那个语法，但也遇到了同样的问题。谢谢你指出语法错误。我尝试了这个方法，但仍然得到相同的问题，返回的图表没有值。我不确定谁来检查是否有javascript错误，因为页面加载很好，图表中没有任何数据。-本网站的第3步介绍了如何在各种浏览器中打开控制台。您应该会看到任何JavaScript错误。非常感谢。让我检查一下，看看是否可以找到任何错误。谢谢您的建议。实际上，我是从浏览器内部运行java脚本控制台的。不幸的是，我实际上没有犯任何错误。在玩了这个之后，我看到当我没有脚本标签时，这个功能就可以工作了。我观察到的行为基本上是列表值不会被返回，变量好像是空的。多谢了，这看起来让事情进展得更进一步了。我检查了浏览器控制台，发现以下错误。“SyntaxError:missing）after-argument-list-chart_-sandbox:59:28”我检查了代码，发现有一个左括号和一个右括号，所以不确定为什么它会抱怨一些语法错误。

<script type="text/javascript">
    AmCharts.makeChart("chartdiv",
        {
            "type": "serial",
            "categoryField": "category",
            "dataDateFormat": "YYYY-MM-DD",
            "startDuration": 1,
            "theme": "dark",
            "categoryAxis": {
                "gridPosition": "start",
                "parseDates": true
            },
            "chartCursor": {
                "enabled": true
            },
            "chartScrollbar": {
                "enabled": true
            },
            "trendLines": [],
            "graphs": [
                {
                    "fillAlphas": 1,
                    "id": "AmGraph-1",
                    "title": "graph 1",
                    "type": "column",
                    "valueField": "column-1"
                }
            ],
            "guides": [],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "score range"
                }
            ],
            "allLabels": [],
            "balloon": {},
            "titles": [
                {
                    "id": "Title-1",
                    "size": 15,
                    "text": "Merit Score Chart"
                }
            ],
            "dataProvider": [
                {% for score_date, score_graph_data in chart_data %}
                    {
                        "category": '{{score_date|safe}}',
                        "column-1": '{{score_graph_data}}'
                    }
                    {{ "," if not loop.last }}
                {% endfor %}
            ]
        }
    );
</script>