在JavaScript代码中，如何从Python中访问提供给HTML模板的数据？

因此，我有一个python flask应用程序，它路由到一个站点并传递两个列表：

def chart():
    labels = ['x', 'y', 'z']
    values = [100, 150, 100]
    return render_template('chart.html',
     labels=labels, values=values)

我使用

Chart.min.js

，然后可以使用列表在我的

Chart.html

中呈现图形：

{% block body %}
<h1>Test chart</h1>

<canvas id="myChart" width="800" height="400"></canvas>

<p id="caption">chart displaying labels n' values</p>

<script type=text/javascript>

    var ctx = document.getElementById('myChart');

    var names = [
        {% for item in labels %}
            "{{ item }}",
        {% endfor %}
    ];

    var numbers = [
        {% for item in values %}
            {{ item }},
        {% endfor %}
    ];

    var chartData = {
        labels: names,
        datasets: [{
          label: 'values',
           data: numbers
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: chartData
    });

</script>

{% endblock %}

我曾尝试将python文件中列表的内容循环到不同的容器中，例如

、

和

，并通过

文档访问这些内容。getElementById（“”

）以及其他一些尝试，都记不清了

我曾试图在谷歌上找到答案，但没有结果

非常感谢您的帮助，我应该提到，我对这些编码语言和框架还不熟悉，所以如果我缺少的东西是显而易见的，请注意

==新的工作版本===

chart.html

：

<script type="text/javascript">

    window.addEventListener('DOMContentLoaded', (event) => {
        const myChart2 = document.getElementById('ChartOne');
        drawChart(ChartOne, {{ labels| tojson }}, {{ values| tojson }}, ChartType.LINE);

    });

</script>

<div>
    <canvas id="ChartOne" width="800" height="400"></canvas>
    <p id="caption">line chart displaying labels n' values</p>
</div>

---

现在，您已经将javascript分离到一个新的js文件中，您必须在那里获取变量

您可以在.js文件中定义一个javascript函数，该函数包含两个数组：

function render_chart(labels, values)
{
    var ctx = document.getElementById('myChart');

    var chartData = {
        labels: names,
        datasets: [{
            label: 'values',
            data: values
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: chartData
    });
}

然后从

chart.html

页面调用该函数，但必须将从Flask传递的变量转换为json。为此，请使用特殊的

tojson

Jinja2过滤器：

<script type="text/javascript">render_chart({{ labels|tojson }}, {{ values|tojson }})'></script>

render_图表（{{labels}tojson}，{{{values}tojson}}）>

嘿！多亏了很多！好的，我理解你的意思：）这是可行的，但我有一个后续问题：当我实现

时，我会遇到语法错误，这些错误告诉我

属性赋值和
参数表达式是应该的。这可能是什么原因？此外，我的
chart.html
通过
{extends'index.html}
块从我的
index.html
扩展而来，我的
index.html
已经有了
body
标记。是否可以使用另一个标签来调用我的JS函数？@shurda在html页面底部有脚本块吗？您可以在其中放置以下内容：
render_chart（{{labels}tojson}}，{{values}tojson}}）是的，我有一个脚本块，尝试了你的解决方案，效果很好。将其进一步修改为更通用。发布扩展版本供人们查看。再次感谢！谢谢谢谢你的帮助，我真的很感激：）
function render_chart(labels, values)
{
    var ctx = document.getElementById('myChart');

    var chartData = {
        labels: names,
        datasets: [{
            label: 'values',
            data: values
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: chartData
    });
}

<script type="text/javascript">render_chart({{ labels|tojson }}, {{ values|tojson }})'></script>