如何訪問從 Python flask 路由中提供給 HTML 模板的數據？

Question

所以我有一個 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 放在 static 文件夾中的一個單獨文件中，用於我的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("")訪問它們以及其他一些嘗試，真的不能記住他們。

我試圖在谷歌上找到答案，但無濟於事。

感謝您提供任何幫助，我應該提一下，我是這些編碼語言和框架的新手，所以如果我缺少的東西很明顯，請進行一些監督。

=== 新工作版本 ===

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
    });
}

Answer 1

現在您已將 javascript 分離到一個新的 js 文件中，您必須將變量放在那里。

你可以做的是在你的.js文件中定義一個javascript function，它需要兩個arrays：

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 傳遞的變量轉換為 Z4566DEEC7F6ECDF25 為此，請使用特殊的tojson Jinja2 過濾器：

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