如何在我的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 %}

现在可以正常工作，我得到一个漂亮的漂亮图表。然后，我想将我的JavaScript放在我的flask应用程序的静态文件夹中的单独文件中，但是我找不到应该如何访问传递给的列表chart.htlm。如果我将一些数据硬编码到JS文件中，则可以很好地呈现图形，但是似乎无法获取python代码提供的数据。

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

// var names = ['x', 'y', 'z'];
// var numbers = [100, 150, 100];

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

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

我试图将列表的内容从python文件循环到不同的容器（例如）中<div>，<ol>并<ul>通过document.getElementById("")其他尝试进行访问，但我真的记不清所有内容。

我试图在Google上找到答案，但无济于事。

感谢您的帮助，我应该提到我是这些编码语言和框架的新手，因此请对我遗漏的内容进行明显的监督。

===新的工作版本===

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>

script.js：

const ChartType = {
    LINE: "line" // add more variables for more chart options
}

function drawEmployeeChart(ctx, labels, values, chartType) {
    var chartData = {
        labels: labels,
        datasets: [{
            label: 'values',
            data: values,
        }]
    };

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