我想在一个函数中更新python/flask中的一个表和一个图。我通过处理表格的更新
@app.route('/api/data', methods=['GET', 'POST'])
def data():
return {'data': [{"datum": "1.6.22", "betreff": "hallo", "wert": "123"},
{"datum": "1.6.22", "betreff": "dsadsa", "wert": "123"},
{"datum": "1.6.22", "betreff": "123", "wert": "123"}]}
在那里我通过处理html中的数据
server: {
url: '/api/data',
then: results => results.data,
},
另外，我想更新一个绘图。我试图通过发送更新的绘图
@app.route('/api/data', methods=['GET', 'POST'])
def data():
e = [{"datum": "1.6.22", "betreff": "hallo", "wert": "111"},
{"datum": "1.9.22", "betreff": "dsadsa", "wert": "7"},
{"datum": "1.2.22", "betreff": "123", "wert": "7"}]
e_datum = [ee["datum"] for ee in e]
e_betreff = [ee["betreff"] for ee in e]
e_wert = [ee["wert"] for ee in e]
df = pd.DataFrame({
'Fruit': e_datum,
'Amount': e_wert,
'City': e_betreff
})
fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group')
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
return {'data': [{"datum": "1.6.22", "betreff": "hallo", "wert": "123"},
{"datum": "1.6.22", "betreff": "dsadsa", "wert": "123"},
{"datum": "1.6.22", "betreff": "123", "wert": "123"}], "graphJSON" : graphJSON}
我刚刚在退货声明中添加了新的情节。html部分的处理方式如下：
<div id='chart' class='chart'”></div>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script type='text/javascript'>
var graphs = {{graphJSON | safe}};
Plotly.plot('chart',graphs,{});
</script>
这对情节没有影响。它不会改变。我想我需要使用render_template来更新绘图，但无法同时更新图形。如何在一个函数中更新表格和绘图？
一种可能的解决方案是将部分代码交换为JavaScript。
在我的示例中，我使用了一个以JSON格式传递数据的端点。在JavaScript库DataTables的帮助下，数据通过AJAX获得并显示为表。如果数据已成功接收，则会在回调中为图表进行额外转换，并在Plotly的帮助下显示。
from flask import (
Flask,
jsonify,
render_template
)
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/data')
def data():
data = [
{"datum": "1.6.22", "betreff": "hallo", "wert": 123},
{"datum": "1.6.22", "betreff": "dsadsa", "wert": 234},
{"datum": "1.6.22", "betreff": "123", "wert": 345},
{"datum": "10.6.22", "betreff": "hallo", "wert": 12},
{"datum": "10.6.22", "betreff": "dsadsa", "wert": 23},
{"datum": "10.6.22", "betreff": "123", "wert": 34}
]
return jsonify(data=data)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="chart"></div>
<table id="table">
<thead>
<tr>
<td>Betreff</td>
<td>Datum</td>
<td>Wert</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
(function(url) {
const table = new DataTable('#table', {
order: [],
ajax: url,
columns: [
{ data: 'betreff' },
{ data: 'datum' },
{ data: 'wert' },
],
initComplete: function(settings, json) {
const items = json.data;
// Transformation of the received data.
const { colors, x } = items.reduce((ctx, item) => {
const { betreff, datum } = item;
!ctx.colors.includes(betreff) && ctx.colors.push(betreff);
!ctx.x.includes(datum) && ctx.x.push(datum);
return ctx;
}, { colors: [], x: [] });
const data = colors.map(clr => {
const y = x.map(datum => {
const item = items.find(item => {
return item.betreff === clr && item.datum === datum
});
return item && item.wert;
});
return {
name: clr,
type: 'bar',
x: x,
y: y
};
});
// Rendering the chart.
Plotly.react('chart', data, { barmode: 'group' });
}
});
})({{ url_for('data') | tojson }});
</script>
</body>
</html>