使用從 Python 中保存為 HTML 中的變量的數據

Question

是否可以將 python 文件中定義的變量傳遞給同一目錄中的 html 文件並在“腳本”標簽中使用？

概要：我正在制作一個 flask 網站，該網站從數據庫中提取數據並使用它在 chartjs 中創建折線圖。 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 的腳本不需要 {{ }} （這實際上是一個打印 function 無論如何）。 到目前為止，我設法將我想要的數據輸入到所需的 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 放在一起的初學者，一種常見的方法似乎是編寫 Jinja 代碼，該代碼使用循環到 output Javascript 中的表達式，或手動使用 Jinja。 這很快就會成為維護的噩夢。

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.

您可以克隆 repo flask-chartjs 。

您可以使用一條路由來呈現包含圖表的頁面：

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

在這種情況下， CHART_ENDPOINT將是/data ，它對應於返回 JSON 的另一條路線。 我還有一個助手 function 將紀元時間轉換為 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)

現在，您可以在模板中放置圖表的 canvas 元素和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 function中，端點是從data-endpoint屬性中獲取的，並在分配給該圖表之前添加到config object 中（信用） ：

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

load_data function 然后從chart.config.endpoint訪問端點，這意味着它總是為提供的圖表獲取正確的數據。

---

您還可以在創建圖表時設置時間單位：

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

我發現這通常需要根據您的數據范圍進行調整。

在create_chart function 中修改該代碼以以與端點相同的方式獲得此代碼將是微不足道的。 如果屬性為data-unit ，則類似於config.options.scales.xAxes[0].time.unit = ctx.datasets.unit 。 這也可以對其他變量進行。

---

您還可以在加載數據時從前端傳遞一個字符串（比如dynamicChart是另一個圖表，使用上述方法創建）：

load_data(dynamicChart, 'query_string')

這將使'query_string'在 flask function 中可用request.args.get('q')

如果您想實現（例如）將字符串發送到后端的文本輸入字段，這很有用，因此后端可以以某種方式處理它並返回在圖表上呈現的自定義數據集。 回購協議中的/dynamic路線就證明了這一點。

這是渲染的樣子：

正如您所看到的那樣，一頁上也可以有多個圖表。

Answer 2

您也可以使用相同的 jinja 模板功能在 js 中訪問您的變量。

也許如果你想要字符串，你應該像這樣"{{variable}}"將它們括起來