时间戳

首页 > 解决方案 > 通过python烧瓶将变量发送到javascript并使用谷歌图表显示条形图

python - 通过python烧瓶将变量发送到javascript并使用谷歌图表显示条形图

问题描述

嘿，我正在尝试在我的 html 页面中制作条形图。我正在使用谷歌图表、烧瓶和 html。每当我手动输入数据时，它都能完美运行。但是当我尝试通过烧瓶发送数据时，它什么也没显示。

这是我的application.py：

import flask
import mysql.connector

app = flask.Flask(__name__)

f = mysql.connector.connect(host = "localhost", user = "root", passwd = "")
mycur = f.cursor()

@app.route("/")
def get_vals():
    mycur.execute("use one_stop_healthcare;")
    mycur.execute("select NAME, ACTIVE, DISCHARGED from ccinfo;")
    dat = mycur.fetchall()

    active=[[]]
    for i in range(0,5,1):
        for j in range(0,2,1):
            active[i].append(dat[i][j])
        active.append([])
    del active[5]
    active.insert(0, ['All the wards', 'Active cases', 'Recovered'])
    print(active)
    return flask.render_template("index.html", active=active)

app.run()

这是我的 index.html（在模板文件夹中）

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {packages: ['corechart', 'bar']});
        google.charts.setOnLoadCallback(drawMultSeries);
        var active
        function drawMultSeries() {
// Here is where i manually add the data. It works like this.
            var active = [['All the wards', 'Active cases', 'Recovered'], ['Ward-1', 357, 153], ['Ward-2', 744, 349], ['Ward-3', 83, 54], ['Ward-4', 1360, 433], ['Ward-5', 149, 100]]
        var data = google.visualization.arrayToDataTable(active);

        var options = {
            title: 'Covid care centers',
            chartArea: {width: '50%'},
            hAxis: {
            title: 'Active cases',
            minValue: 0
            },
            vAxis: {
            title: 'Wards'
            }
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>
</head>
<body>
    <div id="chart_div"></div>
</body>

标签： pythonhtmlflaskgoogle-visualization

解决方案

您目前根本不使用 python 对象“活动”。

在您的 html 代码中替换此行：

var active

经过

var active = {{active}}

（并删除手动声明）

推荐阅读