Question

我有一个python flask应用程序，我需要创建一个java脚本条形图。我已经尝试了各种方法，我知道我的变量被传递到html文件，因为我已将它们移动到html文件中的其他位置并且其工作。我需要将这些变量传递给html文件中的脚本标记。我是所有这一切的新手，并且我需要做一些特殊处理才能使我的变量显示出来，所以可以构建图表吗？

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

# 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>

Answer 1

你搞砸了一下你的逗号。试试下面的内容。如果这不起作用，请提供有关您正在获得的错误的更多信息（可能在JavaScript执行中）

<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>

Answer 2

尝试按照此示例更改jinja脚本中的语法： {{score_date}}至<%=score_date%>

Answer 3

至少在我的经验中，karthick是正确的，脚本标签中的“ jinja”必须用引号引起来。最重要的是，您不应将html标签放在脚本标签中，而应使用document.all或document.getElementById函数。

Python烧瓶传递变量到html文件不能在脚本标记下工作

3 个答案: