通过Python Flask将变量发送到JavaScript,并使用Google Charts显示条形图的步骤如下:
pip install flask
。app.py
,并导入所需的模块:from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def index():
# 假设你有一个名为data的变量,它包含了要显示的数据
data = [10, 20, 30, 40, 50]
# 将data变量发送到JavaScript
return render_template('index.html', data=data)
index.html
,并在其中使用JavaScript和Google Charts来显示条形图:<!DOCTYPE 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':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
// 从Flask发送的data变量中获取数据
var flaskData = {{ data|tojson }};
// 将数据添加到DataTable中
for (var i = 0; i < flaskData.length; i++) {
data.addRow([flaskData[i].label, flaskData[i].value]);
}
var options = {
chart: {
title: 'Bar Chart',
subtitle: 'Data from Flask',
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 400px;"></div>
</body>
</html>
if __name__ == '__main__':
app.run()
现在,当你访问Flask应用程序的根URL时,它将渲染index.html
模板并将变量data
发送到JavaScript。JavaScript代码将使用Google Charts库来绘制条形图,并将数据从Flask变量中添加到图表中。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云