使用 Python 中保存为 HTML 中的变量的数据 [英] Using data saved as a variable in HTML from Python

问题描述

是否可以将在 python 文件中定义的变量传递给同一目录中的 html 文件并在脚本"标签中使用?

简介:我正在制作一个烧瓶网站，该网站从数据库中提取数据并使用它在 chartjs 中创建折线图.Flask 使用 jijna 来管理模板.数据库中的数据已经过规范化，以便图表脚本可以读取(标签在列表中，数据作为元组).到目前为止，我已经生成了路由，以便可以访问每个页面并将值传递给 return_template 参数，如下所示:

@app.route('/room2')定义房间2():return render_template('room2.html', title = 'Room2', time = newLabel, count = newData)

房间的 html 与标题一起被调用:

{% if title %}<title>网站标题 - {{ title }}</title>{％ 别的％}<title>网站</title>{％ 万一 ％}

图表正在html文件中生成，我想获取数据(时间和计数)并在脚本中使用它，就像使用标题一样.然而，chart.js 的脚本不使用 {{ }} (无论如何这本质上是一个打印功能).到目前为止，我设法将我想要的数据放入所需的 html 文件中，这可以通过打印到页面本身的数据来证明，但我不确定如何将其转换为 chartjs 使用的变量.

有什么建议吗?(注意:使用这样的路线可能是错误的起点，但它是合乎逻辑的并且除了逻辑之外没有产生任何错误)

文件:

• data.py:从数据库中获取信息并将其转换为两个变量；

label = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']数据 = ['4,7,2,3,9,9,5]

• routes.py:保存所有页面的路由，
• layout.html:包含网站的总体 html 代码，
• room.html:保存图形，从布局扩展

解决方案

对于尝试将 Flask 和 ChartJS 放在一起的初学者来说，一种常见的做法似乎是编写 Jinja 代码，使用循环输出 Javascript，或者手动使用 Jinja 表达式在 JS 中.这很快就会成为维护的噩梦.

这是我的方法，它允许您定义要在 Python 中绘制图表的数据，使用一些最小的 JS 在模板中放置一个画布，然后使用 Javascript Fetch API 动态更新图表.

您可以克隆 repo

如您所见，一页上也可以有多个图表.

Is it possible to have a variable that is defined in a python file be passed through to a html file in the same directory and used in a 'script' tag?

Synopsis: Im producing a flask website that pulls data from a database and uses it to create a line chart in chartjs. Flask uses jijna to manage templates. The data in the databse has been normalised so that it can be read by the chart script (label is in a list, data as a tuple). So far I have produced routes so that each page can be accessed and passed the value into the return_template parameter as shown here:

@app.route('/room2')
def room2():
    return render_template('room2.html', title = 'Room2', time = newLabel, count = newData )

with the html for the room being called along with the title which is accessed here:

{% if title %}
    <title>Website title - {{ title }}</title>
{% else%}
    <title>Website</title>
{% endif %}

The chart is being generated in the html file, and I want to take the data (time and count) and use it in the script the same way the title is used. However the script for chart.js doesnt take {{ }} (which is essentially a print function anyway). So far ive managed to get the data i want INTO the required html file, which is proven by the data being printed out onto the page itself but im not sure how to translate it into a variable to be used by chartjs.

Any suggestions? (NOTE: using routes like this may be the wrong starting point but it's one that makes logical sense and hasn't produced any errors beside logical)

Files:

• data.py: Takes information from database and converts it into two variables;

label = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
data = ['4,7,2,3,9,9,5]

• routes.py: holds the routes to all the pages,
• layout.html: holds overarching html code for website,
• room.html: holds graph, extends from layout

解决方案

For beginners who try to put Flask and ChartJS together, a common approach seems to be to write Jinja code which uses loops to output Javascript, or manually uses Jinja expressions within the JS. This can quick become a maintenence nightmare.

Here's my approach which lets you define the data you want charted in Python, place a canvas in your template with some minimal JS, then dynamically update the chart using the Javascript Fetch API.

You can clone the repo flask-chartjs.

You can have one route which renders the page containing the chart:

@app.route('/')
def index():
    return render_template('index.html', CHART_ENDPOINT = url_for('data'))

CHART_ENDPOINT in this case will be /data which corresponds to another route which returns the JSON. I also have a helper function which converts epoch times to a ISO 8601 compatible format, which works with moment.

import datetime as DT
def conv(epoch):
    return DT.datetime.utcfromtimestamp(epoch).isoformat()

@app.route('/data')
def data():
    d = {'datasets':
            [
                {'title': 'From Dict',
                 'data': [ {'x': conv(1588745371), 'y': 400},
                           {'x': conv(1588845371), 'y': 500},
                           {'x': conv(1588946171), 'y': 800} ]
                },
            ]
         }

    return jsonify(d)

Now in the template you can place the chart's canvas element with data-endpoint attribute:

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

Then I've implemented two JS functions which in that same template allow you to create the chart, and load the data from the provided endpoint:

<script type='text/javascript'>
    var ctx = document.getElementById('canvas');

    myChart = create_chart(ctx);

    window.onload = function () { 
      load_data(myChart)
    };
</script>

In the create_chart function the endpoint is obtained from the data-endpoint attrib, and added to the config object before it is assigned to that chart (credit):

config.endpoint = ctx.dataset.endpoint;
return new Chart(ctx.getContext('2d'), config);

The load_data function then accesses the endpoint from chart.config.endpoint meaning it always grabs the correct data for the provided chart.

---

You can also set the time units when creating the chart:

myChart = create_chart(ctx, 'hour') # defaults to 'day'

I've found this usually needs to be tweaked depending on your data range.

It would be trivial to modify that code to obtain this in the same manner as the endpoint, within the create_chart function. Something like config.options.scales.xAxes[0].time.unit = ctx.datasets.unit if the attribute was data-unit. This could also be done for other variables.

---

You can also pass a string from the frontend when loading data (say dynamicChart is another chart, created with the method above):

load_data(dynamicChart, 'query_string')

This would make 'query_string' available in the flask function as request.args.get('q')

This is useful if you want to implement (for example) a text input field which sends the string to the backend, so the backend can process it somehow and return a customised dataset which is rendered on the chart. The /dynamic route in the repo kind of demonstrates this.

Here's what it looks like rendered:

As you can see it's possible then to have multiple charts on one page also.

这篇关于使用 Python 中保存为 HTML 中的变量的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！