Python Flask 列表格式在 HTML 中的脚本标签内不起作用

Question

我正在尝试将我的 python flask 应用程序中的列表传递到我的 HTML 中的脚本标签内部。 数据已成功移动到 javascript，但是，它并没有被解释为我最初创建的列表。 相反，整个列表被转换为一个字符数组，它有效地将我的所有值拆分为它们的组成部分。 如何保持列表的完整性？

{% block page_content %}
{{dates}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<script  type="text/javascript">
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: '{{dates|tojson|safe}}',
            datasets: [{
                label: 'Stonk Price',
                data:  '{{prices|tojson|safe}}',
                backgroundColor: 'rgba(255, 99, 132, 0.2)', 
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>
</div>
<script src="script.js"></script>

</body>

</html>
{% endblock %}

我的 flask 应用程序看起来像

@app.route('/', methods=['GET','POST'])
def index():
    dates, prices = dayMonthCloseLists("AAPL") # returns 'mm-dd-yyyy' string and float objects as two lists
    return render_template('index.html', dates=dates, prices=prices)

在 x 轴上将原始列表切成字符的示例：

我对此很陌生，所以我不确定是否只有一个简单的语法解决方案。

Answer 1

我之前写了一个类似的答案，关于如何将 chartjs 与 flask 一起使用。 目的是避免使用 Jinja2 表达式构建 JS 代码。 我已经为您的用例在该存储库上创建了一个分支。

我创建了两个端点，一个返回 JSON 数据，另一个使用图表呈现索引页面。 JSON 数据是通过 fetch API 获得的，然后推送到图表配置 object 。 这避免了将 Jinja2 语法与 javascript 混合的需要。

app.py包括：

一个conv function 将您的日期格式更改为 Moment JS 支持的等格式：

def conv(date_str):
    return DT.datetime.strptime(date_str, '%m-%d-%Y').isoformat()

然后是一个data function，它构建了一个与前端兼容的dict：

我已经模拟了dates和prices ，但您只需将这些与您的dayMonthCloseLists function 一起加载：

@app.route('/data')
def data():
    ''' Endpoint which returns jsonified data '''

    dates = ['01-02-2020', '02-02-2020', '03-03-2020']
    prices = [1.4, 2.5, 9.6]

    sample_list =[dict(x=conv(date), y=prices[idx]) for idx,date in enumerate(dates)]

    d = {'datasets':
            [
                {'title': 'From Dict',
                 'data': sample_list,
                },
            ],
        }

    return jsonify(d)

上面代码中的sample_list如下所示：

[{'x': '2020-01-02T00:00:00', 'y': 1.4},
 {'x': '2020-02-02T00:00:00', 'y': 2.5},
 {'x': '2020-03-03T00:00:00', 'y': 9.6}]

然后，我将上述路由的 url 作为CHART_ENDPOINT传递给模板：

@app.route('/')
def index():
    ''' Route which renders the chart page.  Pass the endpoint which returns jsonified data '''
    return render_template('index.html', CHART_ENDPOINT = url_for('data'))

然后可以将其包含在index.html模板中，例如：

<canvas id="canvas" data-endpoint='{{CHART_ENDPOINT}}'></canvas>

<script type='text/javascript'>
    var ctx = document.getElementById('canvas');
    myChart = create_chart(ctx, unit='month');
    window.onload = function() {
      load_data(myChart)
    };
</script>

请注意，此模板中的<head>部分还包括来自 cdnjs 的moment.min.js库，这是日期转换所必需的，并且chart.min.js也包括在内。

您可以在附加的 repo 中查看处理所有这些的文件flask_chart.js 。 最终结果是如下图表：

Python Flask 列表格式在 HTML 中的脚本标签内不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-07 21:17:08

Python Flask 列表格式在 HTML 中的脚本标签内不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-07 21:17:08

解决方案1
0 已采纳 2020-12-07 21:17:08