javascript - 使用 highcharts 模板中的 fastapi 交互式绘图更新

问题描述

我正在尝试使用 fastapi jinja2 模板引擎在 highcharts 图中绘制一些数据库数组。

这就是我的main.py样子：

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import uvicorn
import random

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/", response_class=HTMLResponse)
async def dash(request: Request):
    data = [random.randint(0,40) for _ in range(12)] # this will be a database call
    # if there is a diff, update the graph, else do nothing
    return templates.TemplateResponse("dash.html", {"request": request, "title": "my random graph", "tokyo_data": data})


if __name__ == '__main__':
    uvicorn.run("main:app", port=80, host='0.0.0.0', reload = True)

templates/dash.html

<html>
   <head>
      <title>my random graph</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: "{{ title }}"
            };
            var credits = {
                  enabled: false
            };
            var subtitle = {
               text: 'test'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: {{ tokyo_data }}
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;
            json.credits = credits;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

到目前为止，它工作正常并显示了情节。每次刷新页面时，我都会得到一个新的东京随机图。

但是我想在数据库更新后自行更新（希望不刷新整页）。如何在不刷新页面的情况下从 fastapi 端更新绘图？

标签： javascriptpython-3.xhighchartsjinja2fastapi

javascript - 使用 highcharts 模板中的 fastapi 交互式绘图更新

问题描述

解决方案

推荐阅读