PythonFlask列表格式在HTML中的脚本标记内不起作用

2024-06-26 17:48:58 发布

您现在位置：Python中文网/ 问答频道 /正文
1282 3

我正在尝试将一个列表从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 %}

我的烧瓶应用程序看起来像

@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轴上被分割为字符的示例：

1

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


Tags： src应用程序列表vartypechartjsscript
1条回答
网友
1楼 · 发布于 2024-06-26 17:48:58

我以前写过一篇关于如何将chartjs与flask结合使用的文章。目的是避免使用Jinja2表达式构建JS代码。我已经为您的用例创建了a branch on that repo

我创建了两个端点，一个返回JSON数据，另一个用图表呈现索引页面。JSON数据是obtained by the fetch API, then pushed to the chart config object。这避免了将Jinja2语法与javascript混合使用的需要

{}包括：

一个conv函数，用于将日期格式更改为矩JS支持的异构格式：

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

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

我已经模拟了dates和prices，但您只需使用dayMonthCloseLists函数加载它们：

@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包含

您可以查看文件flask_chart.js，该文件在所附的repo中处理所有这一切。最终结果是一个类似以下的图表：

happy chart

相关问题 更多 >

    编程相关推荐