从Python中使用保存在HTML中的变量数据

Question

能否让一个在python文件中定义的变量传递到同一目录下的html文件中，并在 "脚本 "标签中使用？

简介：我在制作一个flask网站，从数据库中提取数据，然后用chartjs创建一个线图，flask使用jijna来管理模板。Flask使用jijna来管理模板。数据库中的数据已经被标准化，所以它可以被图表脚本读取（标签是一个列表，数据是一个元组）。到目前为止，我已经制作了路由，使每个页面都能被访问，并将值传递到return_template参数中，如图所示。

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

房间的html和标题一起被调用，在这里被访问。

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

图表是在html文件中生成的，我想把数据（时间和计数）用在脚本中，就像使用标题一样。然而，chart.js的脚本并没有使用{{ }}}。(本质上是一个打印功能)。到目前为止，我已经成功地将我想要的数据输入到了所需的html文件中，这一点可以通过数据被打印到页面上得到证明，但我不知道如何将其转化为一个变量来供chartjs使用。

有什么建议吗？(注：使用这样的路由可能是错误的出发点，但它在逻辑上是合理的，并且没有产生任何错误，除了逻辑上的)

文件。

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

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: 保存所有页面的路由。
• layout.html：存放网站的总体html代码。
• room.html：保存图形，从布局延伸而来。

Answer 1

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

下面是我的方法，它让你在Python中定义你想要的图表数据，用一些最小的JS在你的模板中放置一个画布，然后使用Javascript Fetch API动态更新图表。

你可以克隆这个repo flask-chartjs.

你可以有一个路由来渲染包含图表的页面。

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

CHART_ENDPOINT 在这种情况下，将是 /data 对应于另一个返回JSON的路由。 我还有一个辅助函数，它可以将时间转换为与ISO 8601兼容的格式，与时刻一起工作。

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)

现在，在模板中，你可以将图表的画布元素与 data-endpoint 属性。

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

然后我实现了两个JS函数 在同一个模板中允许你创建图表 并从提供的端点加载数据。

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

    myChart = create_chart(ctx);

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

在这两个函数中 create_chart 功能 端点是由 data-endpoint 归属，并加入到 config 对象之前，将其分配给该图表 (信用):

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

负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： load_data 然后，函数从 chart.config.endpoint 意味着它总是为所提供的图表抓取正确的数据。

---

您也可以设置 时间单位 当创建图表时。

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

我发现这通常需要根据你的数据范围进行调整。

如果修改代码，以与端点相同的方式获取这个数据，在下面的代码中，将是非常简单的。create_chart 功能。 类似于 config.options.scales.xAxes[0].time.unit = ctx.datasets.unit 如果该属性是 data-unit. 对于其他变量也可以这样做。

---

你也可以在加载数据时从前端传入一个字符串（比如说 dynamicChart 是另一个图表，用上述方法创建）。)

load_data(dynamicChart, 'query_string')

这将使 'query_string' 在烧瓶功能中可作为 request.args.get('q')

如果你想实现（例如）一个文本输入字段，将字符串发送到后台，这样后台就可以以某种方式处理它，并返回一个自定义的数据集，并在图表上呈现，那么这个功能就很有用。 这个 /dynamic 路由在repo中就可以证明这一点。

下面是渲染后的样子。

正如你所看到的，在一个页面上也可以有多个图表。

Answer 2

你也可以使用同样的jinja模板功能来访问你的js变量。

如果你想使用字符串，你应该像这样把它们括起来 "{{variable}}"